参见英文答案 >
Make a div 100% height of the browser window30个
适用于大多数浏览器的CSS是什么？
> 2 Divs – 50％和50％垂直填充整个屏幕.
>每个div水平分别为50％和50％,以填充1600px宽度.
<!-- TOP 50% --> <div class="top"> <div class="left">img</div> <div class="right">txt</div> </div> <!-- BOT 50% --> <div class="bot"> <div class="left">text</div> <div class="right">img</div> </div>
解决方法
目标：
你想要一个2 x 2网格的盒子.每个盒子的高度和宽度应为窗口的50％.这实际上比你想象的要容易得多.你不需要.left或.right,你不需要.top .bot.您只需要一个名为.row的类.
编辑：您在评论中提到您希望宽度固定为1600px;我们只需要为身体增加宽度.
码
HTML：
<!-- TOP 50% --> <div class="row"> <div>img</div> <div>txt</div> </div> <!-- BOT 50% --> <div class="row"> <div>text</div> <div>img</div> </div>
CSS：
html,body {
padding:0;
margin:0;
height:100%;
}
body {
width:1600px;
}
.row {
width:100%;
height:50%;
}
.row div {
width:50%;
height:100%;
float:left;
}
截图
这是来自下面的示例,但我添加了颜色以便于查看.
编辑：小提琴已更改为包含宽度.我的截图是在宽度之前,来演示.由于固定宽度,它看起来会更宽.
工作实例：
