我有一個簡單問題佈局網頁，如何以這種方式佈局HTML CSS？

我需要：

第一）報頭=寬度：100％; heigth：100px。（每次都在上面 - 除了heigth小於500px並滾動）

2nd）body = min-heigth：500px;高：100％;寬度：960像素;

3rd）taskbar = width：100％; heigth：90像素（每一次底 - 除了高度小於500像素）

實時預覽：http://templates.cms-guide.com/42161/

來源

2014-03-27 mohammad adibi

爲什麼不用右鍵單擊並查看源代碼？ :) –

我做了100次，下載並檢查它，但我無法確定。出來，我undrestand動態回地但不是這個！ –

[media queries]（http://mediaqueri.es/） – lante

不是特別漂亮的（從一個CSS點），但應該給你一個起點。

Demo Fiddle

HTML

<section> 
    <article></article> 
    <header></header> 
    <footer></footer> 
</section>

CSS

html, body { 
    height:100%; 
    margin:0; 
    padding:0; 
    width:100%; 
} 
header, footer, article { 
    position:absolute; 
    width:100%; 
} 
header { 
    height:100px; 
    background:red; 
    top:0; 
} 
footer { 
    height:90px; 
    bottom:0; 
    background:green; 
} 
section { 
    position:relative; 
    height:100%; 
    min-height:590px; 
    background:grey; 
    text-align:center; 
    width:100%; 
    min-width:960px; 
} 
article { 
    padding-top:100px; 
    padding-bottom:90px; 
    margin:0; 
    width:960px; 
    background:blue; 
    margin:0 auto; 
    position:relative; 
    height:100%; 
    box-sizing:border-box; 
}

來源

2014-03-27 15:12:43 SW4

很好簡單明瞭，謝謝。 –

HTML

<!DOCTYPE HTML> 
    <head> 
     <title>WebSite</title> 
    </head> 
    <body> 
     <div id="header"></div> 
     <div id="body"></div> 
     <div id="taskbar"></div> 
    </body> 
</html>

CSS

#header{ 
    max-height: 500px; 
    height: 100px; 
    width: 100%; 
} 

#body{ 
    min-height: 500px; 
    height: 100%; 
    width: 960px; 
} 

#taskbar{ 
    width: 100%; 
    height: 90px; 
    max-height: 500px; 
}

來源

2014-03-27 15:14:22 Chris

如何以這種方式佈局HTML CSS？

回答

Demo Fiddle

相關問題