我有两个容器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>
6条答案
按热度按时间ryhaxcpt1#
如果你不关心老式IE,你也可以使用视口百分比。
height: 100vh;
n6lpvg4x2#
为空div设置窗口全高
第一种解决方案,采用绝对定位-FIDDLE
第二种解决方案用静态(也可以用相对)定位& jQuery -FIDDLE
46scxncf3#
伙计,试试最小高度。
ie3xauqp4#
你必须声明html到div1元素的高度,比如:
演示:http://jsfiddle.net/Ccham/
cngwdvgl5#
我不认为你需要浮动。
display: inline-block;
用于将块显示为内联(就像跨度,但保持块效果)使用html中的注解是因为你有75%+25%= 100%。div之间的空格计数(所以你有75%+1%?+25%= 101%,表示换行符)
44u64gxh6#
我认为最快的方法是使用分数网格系统。所以你的容器有100vw,这是100%的窗口宽度和100vh,这是100%的窗口高度。
使用分数或'fr',您可以选择您喜欢的宽度。分数之和等于100%,在本例中为4FR。所以第一部分是1fr(25%),第二部分是3fr(75%)
更多关于fr单位here。