浮动div必须水平滚动，外部div垂直滚动应该适用于div

Question

我想要一种表格结构。第一列是问题，第二列是行跨越的注释。

为此，我使用了浮动div

两者都应该由父级垂直滚动。但仅第二列应包含水平滚动

我能够获得输出，但滚动仅出现在页面底部。

但是我想要水平滚动，它应该固定在父div的底部，如果我把它作为输出我不能滚动第二列和它的父。

水平滚动工作正常。需要解决垂直滚动

如何克服这个问题？

＆＃13;

＆＃13;

#outer{
    height : 50px;
    overflow-x : hidden;
    overflow-y : scroll;
    border : 1px solid black;
}
#inner1{
    float : left;
    width : 20%;
    height : 100%;
}
#inner2{
    width : 80%;
    height : 100%;
    overflow-y : hidden;
}

.innerSub2{
    width : 800px;
}

＆＃13;

<div id="outer">
    <div id="inner1">
        <div class="innerSub1">Question</div>
        <div class="innerSub1">Question</div>
        <div class="innerSub1">Question</div>
        <div class="innerSub1">Question</div>
    </div>
    <div id = "inner2">
        <div class="innerSub2">Comment</div>
        <div class="innerSub2">Comment</div>
        <div class="innerSub2">Comment</div>
        <div class="innerSub2">Comment</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

`

Answer 1

也许inner2 div在外部div之上，我不知道更好。

html {
	height: 100%;
    width: 100%;
}
body {
    margin: 0px;
}
.topicwrap {
    position: relative;
    height: 50px;
    width: 100%;
    overflow : hidden;
    border : 1px solid black;
    margin-bottom: 10px;
}
.outer{
    position: relative;
    height : 50px;    
    overflow-x : hidden;
    overflow-y : scroll;
    z-index: 0;
}
.inner1{
    float : left;
    width : 20%;
    background-color: #CCC;
}
.inner2{
    position: absolute;
    right: 15px;
    top: 0px;   
    width : 80%;
    height: 50px;
    overflow-y : hidden;
    background-color: #E0E0E0;
    z-index: 99;
}
.innerSub1{
    width: 20%;
}
.innerSub2{
    width: 800px;
}

<div class="topicwrap">
<div class="outer">
    <div class="inner1">
        <div class="innerSub1">Question1</div>
        <div class="innerSub1">Question2</div>
        <div class="innerSub1">Question3</div>
        <div class="innerSub1">Question4</div>
        <div class="innerSub1">Question5</div>
        <div class="innerSub1">Question6</div>
    </div><!-- end inner1 -->
</div><!-- end outer -->
    <div class="inner2">
        <div class="innerSub2">Comment1</div>
        <div class="innerSub2">Comment2</div>
        <div class="innerSub2">Comment3</div>
        <div class="innerSub2">Comment4</div>
    </div><!-- end inner2 -->
</div><!-- end topic-wrap -->

Answer 2

您可以按如下方式获取父div的滚动

-Duser.timezone=GMT

#outer{
    height : 50px;
    overflow-x : scroll;
    overflow-y : scroll;
    border : 1px solid black;
}
#inner1{
    float : left;
    width : 20%;
    height : 100%;
}
#inner2{
        float : right;
    width : 80%;
    height : 100%;
   // overflow-y : hidden;
}

.innerSub2{
    width : 800px;
}