Question

我有两个div：

<div class="header">
</div>
<div class="scroll">
</div>

“header”是固定大小（40px）的栏，“scroll”是侧栏，带有滚动条。我想让“滚动”填充“标题”和屏幕底部之间可用的所有高度。但是如果我在“滚动”上设置100％或100vh高度，它会填充高度，但也需要40px，这不适合屏幕，所以滚动条也出现在浏览器上，即使div“滚动”有它自己的滚动条。

Answer 1

如果您愿意，可以使用CSS3 calc。

width: calc(100% - 40px);

但要注意并非所有浏览器都支持此功能请参阅http://caniuse.com/calc以查看calc的浏览器支持。

Answer 2

这可以通过两种方式完成。

div {
width: calc (100% - 40px);
}

或

div {
margin: 40px 0 0 40px;
}

这将保留顶部和左侧。假设滚动条在哪里。如果你想要保留前40个像素，那么

div {
    margin-top: 40px;
    }

Answer 3

我会像这样给.scroll元素position:absolute;： Fiddle Demo

<强> HTML

<div class="container">
    <div class="header"></div>
    <div class="scroll"></div>
</div>

<强> CSS

.container {
    background-color:yellow;
    position:relative;
    height:500px;
}
.header {
    background-color:red;
    height:40px;
}
.scroll {
    width:100px;
    position:absolute;
    top:40px;
    bottom:0px;
    left:0px;
    background-color:blue;
}

适合屏幕的div

3 个答案: