使 div 适合屏幕答案

【问题标题】：Fit div to screen使 div 适合屏幕
【发布时间】：2014-03-18 06:12:39
【问题描述】：

我有两个 div：

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

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

【问题讨论】：

width: calc(100% - 40px);? （虽然是 CSS3）
试试这个Link
谢谢，完美运行:)
putvandes 方法有效。

标签： html css scroll height

【解决方案1】：

我会给.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;
}

【讨论】：

【解决方案2】：

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

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

或

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

这将保留顶部和左侧的边距。假设这就是滚动条所在的位置。如果您只想保留前 40 位像素，请执行

div {
    margin-top: 40px;
    }

【讨论】：

【解决方案3】：

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

width: calc(100% - 40px);

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

【讨论】：