Question

我遇到让滚动条出现在左右容器内部的问题。

此刻滚动条出现在身体上。

HTML：

<div class="wrapper">
    <div class="cont">
       <div class="left">
           <div class="rect"></div>
           <div class="rect"></div>
           ...
       </div>
       <div class="right">
           <div class="rect"></div>
           <div class="rect"></div>
           ...   
       </div>  
    </div>
</div>

CSS：

html, body {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;        
}

.wrapper {
    display: table;
    background-color: yellow;
    width: 100%;
    height: 100%;
    padding: 50px 50px 0 0;   
    box-sizing: border-box;
}

.cont{
    width: 100%;
    height: 100%;
    background: #333333;
    display: table-row;        
}

.left{
    display: table-cell;
    width: 200px;
    height: 100%;
    overflow-y: scroll;
    background: #FF0000;
}

.right{
    display: table-cell;
    width: auto;
    height:100%;
    overflow: hidden;
    background: #00FF00;
}

.rect{
    display: inline-block;
    width: 150px;
    height: 40px;
    margin: 3px;
    background: #660000;
}

如何让卷轴显示在左右容器内，而不是放在身体上？所以它看起来像这样：

enter image description here

Answer 1

这是一个更复杂的布局。并且您将使用表格布局运行介绍麻烦。我建议你抛弃表格布局并使用以下内容：

演示：http://jsfiddle.net/pQq45/19/

html, body {
     height: 100%;
     margin:0;
     padding:0;
 }
 .wrapper {
     background-color: yellow;
     height: inherit;
     padding: 50px 50px 0 0;
     box-sizing: border-box;
 }
 .cont {
     background: #333333;
     position: relative;
     height: inherit;
 }
 .left {
     position: absolute;
     left:0;
     top:0;
     bottom:0;
     width: 200px;
     overflow: auto;
     background: #FF0000;
 }
 .right {
     position: absolute;
     left: 200px;
     top:0;
     right:0;
     bottom:0;
     overflow: auto;
     background: #00FF00;
 }
 .rect {
     display: inline-block;
     width: 150px;
     height: 40px;
     margin: 3px;
     background: #660000;
 }

Answer 2

更新2

Try this

我认为这是因为你有height: 100%。尝试设置像素高度并将display: table-cell更改为display: block，以便它们能够保持高度。

它应该是这样的：

.left{
    width: 20%;
    background: #FF0000;
}

.right{
    width: 80%;
    background: #00FF00;
}

.cont {
    height: 100%;
}

.right, .left {
    float: left;
    display: block;
    height:100%;
    overflow-y: scroll;
}

Answer 3

你错过了

    overflow-y: scroll;

On .right

显示表格和滚动条

3 个答案: