参见英文答案 >
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;
- }
截图
这是来自下面的示例,但我添加了颜色以便于查看.
编辑：小提琴已更改为包含宽度.我的截图是在宽度之前,来演示.由于固定宽度,它看起来会更宽.
工作实例：
