html – CSS垂直填充屏幕50％50％

参见英文答案 > Make a div 100% height of the browser window30个

适用于大多数浏览器的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>

解决方法

目标：

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

编辑：您在评论中提到您希望宽度固定为1600px;我们只需要为身体增加宽度.

码

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

截图

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

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

工作实例：

html – CSS垂直填充屏幕50％50％

解决方法

相关文章