使用CSS设置div高度以适合浏览器
我在容器div中有两个DIV,我需要将它们设置为适合浏览器窗口,如下所示,但它不适合我的代码,请建议我一个解决方案
我的样式表代码
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>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
mde*_*dev 34
为空div设置窗口全高
绝对定位的第一个解决方案 - FIDDLE
.div1 {
position: absolute;
top: 0;
bottom: 0;
width: 25%;
}
.div2 {
position: absolute;
top: 0;
left: 25%;
bottom: 0;
width: 75%;
}
第二个解决方案与静态(也可以使用相对)定位和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() });
});
});