Html CSS 垂直填充屏幕 50% 50%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23956910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to fill screen 50% 50% vertically
提问by asdf
What's the proper CSS to achieve this for most browsers?
对于大多数浏览器来说，实现这一目标的正确 CSS 是什么？
- 2 Divs - 50% and 50% vertically fill the entire screen.
- Each div has 50% and 50% horizontally to fill 1600px width.
- 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>
采纳答案by Andy Mercer
Goal:
目标：
You want a 2 x 2 grid of boxes. Each box is to be 50% of the window in height and width. This is actually much easier than you'd think. You don't need .leftor .right, you don't need .top.bot. All you need is a single class called .row.
你想要一个 2 x 2 的盒子网格。每个框的高度和宽度应为窗口的 50%。这实际上比你想象的要容易得多。你不需要.left或者.right，你不需要.top.bot。您只需要一个名为.row.
EDIT: You mentioned in comments that you want the width fixed at 1600px;We just need to add widthto body.
编辑：您在评论中提到您希望将宽度固定在1600px;We 只需要添加width到body.
Code
代码
HTML:
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:
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;
}
Screenshot
截屏
This is from the example below, but I've added colors to make it easier to see.
这是来自下面的示例，但我添加了颜色以使其更易于查看。
Edit: The Fiddle has changed to include width. My screenshot is before the width, to demonstrate. It'll look a lot wider, because of the fixed width.
编辑：小提琴已更改为包括宽度。我的截图是在宽度之前，以演示。由于宽度固定，它看起来会更宽。
Working Example:
工作示例：
回答by Samih
There are a few ways to achieve this. I tend to favour this one:
有几种方法可以实现这一点。我倾向于支持这个：
.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;
}
