css - 设计灵活的页面布局

Question

首先查看在油漆中准备的图像。

我想设计一个灵活的页面，它将具有这种类型的四个分区。因此监视器屏幕或浏览器大小的变化会自动重新调整窗口大小。这 4 个框应适合 100% 的浏览器屏幕和任何显示器尺寸，并避免滚动条出现。所以任何人都可以告诉我如何在css样式表中对其进行编码。

这是我的代码。html:

<div id="bottomleft">
</div>

<div id="topleft">
</div>

<div id="topright">
</div>

<div id="bottomright">
</div>

</div>
</body>

CSS：

    *
    {
    margin: 0;
    padding: 0;
    }
    #wrapper
    {
    margin: 0px auto;
    height: 100%;
    width: 100%;
    }
    #bottomleft
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: left;
    }
    #topleft
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: right;
    }
    #topright
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: left;
    }
    #bottomright
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: right;
    }

Answer 1

演示

嗨现在body, html height 100%;像这样定义你的css

并box-sizing在你的定义id

body, html{
height:100%;
}
#bottomleft, #bottomright, #topright, #topleft{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

演示

Answer 2

您在所有设备的 head 标记中使用此元数据，并为任何窗口宽度使用其他 css

此元用于任何设备和链接标签，用于加载具有最小宽度 شrbitrary 的 css

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

最好的祝福