Html CSS垂直填充屏幕50%50%

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

• 2个分区-50%和50%垂直填充整个屏幕
• 每个div有50%和50%水平，以填充1600px的宽度

img
文本
文本
img

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

目标： 您需要一个2 x 2的长方体网格。每个箱子的高度和宽度应为窗户的50%。这实际上比你想象的要容易得多。您不需要

.left

或

.right

，您不需要

.top

.bot

。您只需要一个名为

.row

的类

编辑：您在评论中提到希望宽度固定在

1600px

我们只需要将

宽度

添加到

主体

代码 HTML: 截图 这是下面的例子，但我添加了颜色，使它更容易看到

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

工作示例：

---

我认为萨米的回答中缺少了一些东西。可能

float

看看这是否能让你获得更好的结果：

---

我的答案与此相关：。有点像这样吗？（至少对于左/右分割）好吧，有点像，但垂直，两个div堆叠在一起，不是100%确定，但我认为你可以简单地用宽度/左/右代替高度/上/下。感谢James指出这一点！对这就是我想要的，谢谢！！！！我已经更新了帖子-查看图片不喜欢浮动，所以它是故意“丢失”的：p。对我来说，使用浮点数来表示这类内容是没有语义的。我已经更新了帖子-查看图片为什么你硬编码了

主体的高度

？我硬编码了

主体的高度

，因为问题作者希望框中的内容占据屏幕的“50%”。这是2014年，我们没有像

vh

这样的单位。

<!-- 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>

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

<!-- TOP 50% -->
<div class="row">
   <div>img</div>
   <div>txt</div>
</div>

<!-- BOT 50% -->
<div class="row">
   <div>text</div>
   <div>img</div>
</div>

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

body {
    width:1600px;
}

.row {
    width:100%;
    height:50%;
}
.row div {
    width:50%;
    height:100%;
    float:left;
}