设计灵活的页面布局

首先看到在油漆中准备的图像。设计灵活的页面布局

我想设计一个灵活的页面，这将有这种类型的四个师的。并因此自动更改监视器屏幕或浏览器大小重新调整窗口大小。这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; 
    }

来源

2012-10-10 D.J.

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

来源

2012-10-10 06:01:30

你能告诉我天气我的css代码（指定高度，宽度为50％）是真的需要吗？ –

其实你必须定义父母的身高，所以这就是为什么@罗希特定义了身体的高度，html ...... –

是现在。怎么运行的。？感谢让我开始。 :) –

您可以使用这个元的头标记为所有设备和使用其他的CSS任何窗口宽度

任何德维奇和链接此元使用标签为负载CSS与最小宽度ش任意

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

最好的问候

来源

2012-10-10 06:10:56

设计灵活的页面布局

回答

相关问题