设置div的高度以适合使用CSS的浏览器 [英] Set div height to fit to the browser using CSS
本文介绍了设置div的高度以适合使用CSS的浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个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>
解决方案>
为空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（）}）;
}）;
}）;
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
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>
解决方案
Setting window full height for empty divs
1st solution with absolute positioning - 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
.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() });
});
});
这篇关于设置div的高度以适合使用CSS的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
