設計靈活的頁面佈局

首先看到在油漆中準備的圖像。設計靈活的頁面佈局

我想設計一個靈活的頁面，這將有這種類型的四個師的。並因此自動更改監視器屏幕或瀏覽器大小重新調整窗口大小。這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

設計靈活的頁面佈局

回答

相關問題