css - 显示表和卷轴

Question

我在让滚动条出现在左右容器中时遇到问题。

此刻 body 上出现了滚动条。

请看 fiddle :http://jsfiddle.net/pQq45/7/

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;
}

如何让卷轴出现在左右容器内，而不是出现在 body 上？所以它看起来像这样:

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;
 }