设计灵活的页面布局

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

的 Demo 的

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

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

的 Demo 的

Answer 2

您在头标记中为所有设备使用此元，并将其他css用于任何窗口宽度

此meta用于任何带有min-widthشrbitrary的加载css的devic和link标记

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

最好的问候