css - 设计灵活的页面布局

Question

先看paint中准备好的图片。

我想设计一个灵活的页面，其中包含这种类型的四部分。因此更改监视器屏幕或浏览器大小会自动调整窗口大小。这所有 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

Demo

HI 现在在 css 中定义你的 body, html height 100%;

并在您的 id 中定义 box-sizing

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

Demo