Html 使用 CSS 设置 div 高度以适应浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18934141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set div height to fit to the browser using CSS
提问by Dilukshan Mahendra
I have two DIVs inside a container div, where I need to set them both to fit to the browser window like below, but it doesn't fit in my code, please suggest me a solution
我在容器 div 中有两个 DIV，我需要将它们都设置为适合浏览器窗口，如下所示，但它不适合我的代码，请给我建议一个解决方案
My Style Sheet code
我的样式表代码
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: auto;
width: 100%;
}
.div1 {
float: left;
height: 100%;
width: 25%;
}
.div2 {
float: left;
height: 100%;
width: 75%;
}
Body
身体
<body>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
回答by Dsmart
You could also use viewport percentagesif you don't care about old school IE.
如果您不关心老式 IE，您也可以使用视口百分比。
height: 100vh;
height: 100vh;
回答by mdesdev
Setting window full height for empty divs
为空 div 设置窗口全高
1st solution with absolute positioning - FIDDLE
绝对定位的第一个解决方案 - FIDDLE
.div1 {
position: absolute;
top: 0;
bottom: 0;
width: 25%;
}
.div2 {
position: absolute;
top: 0;
left: 25%;
bottom: 0;
width: 75%;
}
2nd solution with static (also can be used a relative) positioning & jQuery - FIDDLE
具有静态（也可以使用相对）定位和 jQuery 的第二个解决方案 - FIDDLE
.div1 {
float: left;
width: 25%;
}
.div2 {
float: left;
width: 75%;
}
$(function(){
$('.div1, .div2').css({ height: $(window).innerHeight() });
$(window).resize(function(){
$('.div1, .div2').css({ height: $(window).innerHeight() });
});
});
回答by Vitor Villar
Man, try the min-height.
伙计，试试最小高度。
.div1 {
float: left;
height: 100%;
min-height: 100%;
width: 25%;
}
.div2 {
float: left;
height: 100%;
min-height: 100%;
width: 75%;
}
回答by Dionys
I do not think you need float.
我认为你不需要浮动。
html,
body,
.container {
width: 100%;
height: 100%;
}
.div1, .div2 {
display: inline-block;
margin: 0;
min-height: 100%;
}
.div1 {
width: 25%;
background-color: green;
}
.div2 {
width: 75%;
background-color: blue;
}<div class="container">
<div class="div1"></div><!--
--><div class="div2"></div>
</div>display: inline-block;is used to display blocks as inline (just like spans but keeping the block effect)
display: inline-block;用于将块显示为内联（就像跨度但保持块效果）
Comments in the html is used because you have 75% + 25% = 100%. The space in-between the divs counts (so you have 75% + 1%? + 25% = 101%, meaning line break)
使用 html 中的注释是因为您有 75% + 25% = 100%。div 之间的空间很重要（所以你有 75% + 1%？+ 25% = 101%，意思是换行）
回答by Shekhar K. Sharma
You have to declare height of html to div1 elements together, like:
您必须将 html 的高度声明为 div1 元素，例如：
html,
body,
.container,
.div1,
.div2 {
height:100%;
}
