给 body 100% 的浏览器高度答案

【问题标题】：Give body 100% of the browser height给 body 100% 的浏览器高度
【发布时间】：2015-10-11 17:09:36
【问题描述】：

我有这个：

我想要这个：

我试过这个：

html, body
{
    height: 100%; //and this -> 100vh
}

但它不起作用。

这是我的代码：

https://jsfiddle.net/zbjaaxe6/9/

有什么解决办法吗？

【问题讨论】：

你试过给容器height:100% - jsfiddle.net/61eguhw4
</span> 在您的 HTML 中无处不在...可能是复制粘贴错误。你的问题有任何意义。你要求body height 100% 这是！
见 CSS：jsfiddle.net/zbjaaxe6/18
您的代码实际上按预期工作——但您的正文中没有内容。您的风格是：“内容部分应填充与内容一样多的高度空间”。添加一些内容，身体高度会增加。我认为您要问的是是否将内容部分固定为窗口大小，而不管该部分中是否有任何内容。对吗？
是的，我希望内容部分填充屏幕高度，即使其中没有任何内容。

标签： javascript jquery html css dom

【解决方案1】：

这个问题很适合flexbox：

CSS

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;   // set min-height instead of height, otherwise body won't
                         // grow with content, if content is bigger than viewport
}

header {
    height: 50px;  // adjust to what you want
}

main {
    flex: 1;       // This will make the 'main' block to expand !
}

footer {
    height: 30px;  // adjust to what you want
}

HTML

<body>
    <header>HEADER</header>
    <main>MAIN</main>
    <footer>FOOTER</footer>
</body>

结果：

Fiddle
Flexbox 是一个 IE10+ 解决方案。 Browser support in detail

【讨论】：

【解决方案2】：

"使用 vw/vh，我们可以将元素的大小设置为相对于视口。 vw/vh 单位很有趣，因为 1 个单位反映了 1/100 > 视口的宽度。使元素的全宽例如，视口，您可以将其设置为 width:100vw。”

-- Jonathan Snook，使用 CSS3 的 VW 和 VH 单位调整大小

CSS：

[class*="col"] {
    border: 1px solid black;
}

#menu{
    display:none;
    margin-top:20px;
    position:absolute;
    background: #fff;
    z-index: 1;
}

body {
   font: caption;

}

#content{
    min-height: 90vh;     
}

#footer{
    min-height: 5vh;     
}

#header{
    min-height: 5vh;     
}

HTML:

<div class="container">
    <div class="row">
            <!-- Small devices >= 768px Collapsed to start, horizontal above breakpoints -->
            <div id = "header" class="col-xs-10"><span id="btnMenu" class="glyphicon glyphicon-menu-hamburger" aria-hidden="true">TITLE</div>
            <div id="menu" class="col-xs-3 menu">
                MENU
            </div>
            <div id="content" class="col-xs-10 content">
               </span>CONTENT
            </div>
            <div class="col-xs-10" id = "footer">FOOTER</div>
    </div>
</div>

【讨论】：

【解决方案3】：

不理想，但您可以使用绝对定位：

.content {
  position: absolute;
  top: 20px;
  bottom: 0;
}

或者，如果你支持 ie9+，你可以使用视口百分比：

.content {
  height: 100vh;
}

样式应该在内容部分，而不是 html/body。

编辑：fiddle

【讨论】：

我希望标题 + 内容 + 页脚占据页面的 100%，而不仅仅是内容部分。我不想要滚动条。
在下面查看@Michael P. Bazos 的回答——如果您不需要旧版浏览器支持，那么 flexbox 将是一个很好的解决方案。

【解决方案4】：

我不知道这是否是您想要的，但请看一下： https://jsfiddle.net/zbjaaxe6/23/

.content{
position: relative;
margin: 0;
min-height: 100vh;
}

【讨论】：

我希望标题 + 内容 + 页脚占据页面的 100%，而不仅仅是内容部分。我不想要滚动条。

【解决方案5】：

我使用 flexbox 属性解决了您的问题。

.container, 
.row {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#title, 
#footer {
    flex: none;
}
#content {
    flex: 1 0 auto;
}

你可以看到here解决方案。

【讨论】：