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

This question already has answers here:

How to make a div 100% height of the browser window

(35个答案)


6年前关闭。




对于大多数浏览器，什么是实现此目的的合适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;，我们只需要将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;
}

屏幕截图

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

编辑:小提琴已更改为包括宽度。我的屏幕截图在宽度之前，以进行演示。由于宽度固定，它看起来会宽很多。

工作示例:

关于html - CSS垂直填充屏幕50％50％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23956910/