给身体100％的浏览器高度
[英]Give body 100% of the browser height
问题描述
I have this: 
我有这个：
I want this: 我要这个：
I've tried this: 我试过这个：
html, body
{
height: 100%; //and this -> 100vh
}
but it didn't works. 但它不起作用。
Here is my code: 这是我的代码：
https://jsfiddle.net/zbjaaxe6/9/ https://jsfiddle.net/zbjaaxe6/9/
Any solutions? 有解决方案吗
5 个解决方案
解决方案1
4 2015-10-11 17:43:45
This problem is a good candidate for flexbox : 这个问题是flexbox的一个很好的选择 ：
CSS 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 HTML
<body>
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
</body>
Result: 结果：
- Fiddle 小提琴
- Flexbox is an IE10+ solution. Flexbox是一款IE10 +解决方案。 Browser support in detail 浏览器支持详细
解决方案2
2 已采纳 2015-10-11 17:38:43
"With vw/vh, we can size elements to be relative to the size of the viewport. The vw/vh units are interesting in that 1 unit reflects 1/100th > the width of the viewport. To make an element the full width of the viewport, for example, you'd set it to width:100vw."
-- Jonathan Snook, Sizing With CSS3's VW and VH Units - Jonathan Snook，使用CSS3的大众和VH单位进行调整
CSS: 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: 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
1 2015-10-11 17:26:56
Not ideal, but you could use absolute positioning: 不理想，但你可以使用绝对定位：
.content {
position: absolute;
top: 20px;
bottom: 0;
}
Or, you could use viewport percentages if you are cool with supporting ie9+: 或者，如果你支持ie9 +很酷，你可以使用视口百分比：
.content {
height: 100vh;
}
The styles should be on the content section, not the html/body. 样式应该在内容部分，而不是html / body。
解决方案4
1 2015-10-11 17:32:25
I don't know if that's what you want but take a look : https://jsfiddle.net/zbjaaxe6/23/ 我不知道这是你想要的，但看一看： https ： //jsfiddle.net/zbjaaxe6/23/
.content{
position: relative;
margin: 0;
min-height: 100vh;
}
解决方案5
1 2015-10-11 17:47:00
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.