CSS垂直填充屏幕50％50％

Question

对于大多数浏览器来说，实现此目的的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>

Answer 1

目标：

你想要一个2 x 2网格的盒子。每个盒子的高度和宽度应为窗口的50％。这实际上比你想象的要容易得多。您不需要.left或.right，您不需要.top .bot。您只需要一个名为.row的单个类。

编辑：您在评论中提到您希望宽度固定为1600px;我们只需要将width添加到body。

代码

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;
}

截图

这是来自下面的示例，但我添加了颜色以便于查看。

编辑：小提琴已更改为包含宽度。我的截图是在宽度之前，来演示。由于固定的宽度，它看起来会更宽。

工作示例：

<子> <子> <子>

Answer 2

有几种方法可以实现这一目标。我倾向于赞成这一个：

http://jsfiddle.net/YyBW7/

.top, .bot {
    height: 50%;
    border: 1px solid black;
    box-sizing: border-box;
}

.left, .right {
    display: inline-block;
    width: 50%;
    height: 100%;
    margin-right: -4px;
    border: 1px solid red;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

Answer 3

我认为Samih的答案中有些东西缺失了。可能是float 看看这是否能让你获得更好的结果： jsFiddle