【问题标题】：CSS to fill screen 50% 50% vertically [duplicate]CSS垂直填充屏幕50％50％[重复]
【发布时间】：2014-07-20 08:24:09
【问题描述】：

对于大多数浏览器来说，实现这一点的正确 CSS 是什么？

2 div - 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>

【问题讨论】：

我的回答是相关的：Make div 100% height of browser window.
有点像这样？ flynn1179.net/xml（至少对于左/右分割）
嗯，有点，但垂直，两个 div 堆叠在一起，
不是 100% 确定，但我认为您可以简单地将 width/left/right 替换为 height/top/bottom。
感谢詹姆斯指出这一点！

标签： html css

【解决方案1】：

有几种方法可以实现这一点。我倾向于这个：

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

【讨论】：

是的！这就是我要找的，谢谢！！！！
我已经更新了帖子，-查看图片

【解决方案2】：

目标：

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

编辑：您在 cmets 中提到您希望将宽度固定为 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;
}

截图

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

编辑：Fiddle 已更改为包含宽度。我的屏幕截图在宽度之前，以进行演示。由于宽度固定，它看起来会更宽。

工作示例：

【讨论】：

你为什么硬编码body的高度？
我对@987654335@ 的高度进行了硬编码，因为问题作者希望这些框占据屏幕的“50%”。那是 2014 年，我们还没有 vh 单位之类的东西。

【解决方案3】：

我认为 Samih 的回答中缺少一些东西。应该是float 看看这是否能让你得到更好的结果： jsFiddle

【讨论】：

不喜欢花车，所以它是故意“失踪”的：p。对我来说，使用花车来做这样的事情不是语义的。
我已经更新了帖子，-查看图片