Question

我不知道如何在顶部和右侧有黄色的50px间隙，不增加容器的大小，因此滚动条不会显示。

HTML：

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

CSS：

html, body {
    height: 100%;
    width: 100%;
}

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

.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-y: scroll;
    background: #00FF00;
}

请参阅jsfiddle：http://jsfiddle.net/bL463/10/

我尝试用保证金替换填充，但它没有帮助。

请有人解释我该怎么做。

Answer 1

一个简单的解决方案是使用box-sizing: border-box;

小提琴：http://jsfiddle.net/bL463/12/

默认的边框大小调整方法是content-box，它排除项目的填充和边框形成整体尺寸。使用边框，这些属性将被添加到此计算中。

显示表边距/填充

1 个答案: