关于html：CSS垂直填充屏幕50％50％

CSS to fill screen 50% 50% vertically

本问题已经有最佳答案，请猛点这里访问。

enter image description here 。

对于大多数浏览器来说，正确的CSS是什么？

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

1
2
3
4
5
6
7
8
9
10

img
txt



text
img

相关讨论

目标：

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

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

代码HTML：

1
2
3
4
5
6
7
8
9
10

img
txt



text
img

号CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

body {
width:1600px;
}

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

截图

这是下面的示例，但我添加了一些颜色以使其更容易看到。

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

enter image description here 。

工作示例：

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

http://jsfiddle.net/yybw7/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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