WEB2.0標準教程:第十天 自適應高度_Web標準教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
如果我們想在3列布局的最后加一行頁腳,放版權之類的信息。就遇到必須對齊3列底部的問題。在table布局中,我們用大表格嵌套小表格的方法,可以很方便對齊三列;而用div布局,三列獨立分散,內容高低不同,就很難對齊。其實我們完全可以嵌套div,把三列放進一個DIV中,就做到了底部對齊。下面是實現例子(白色背景框模擬一個頁面):
<html>
<head>
<style type="text/css">
#body,div{FONT-SIZE:12px;}
#pagebox{
margin:0px;
PADDING:20px;
BACKGROUND: #FFF;
FONT-FAMILY: arial,'宋體','新宋體',verdana,sans-serif;
WIDTH:600px;
}
#header{
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: #ccd2de;
WIDTH: 580px;
HEIGHT: 60px;}
#mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: #FFF;
}
#menu{
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px 0px 0px 0px;
WIDTH: 400px;
BACKGROUND: #ccd2de;
}
#content{
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING:0px;
WIDTH: 400px;
BACKGROUND: #E0EFDE;}
#sidebar{
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
BACKGROUND: #F2F3F7;
WIDTH: 170px;
}
#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 40px;
WIDTH: 580px;
}
</style>
</head>
<body>
<div id="header">這里是#header{
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: #ccd2de;
WIDTH: 580px;
HEIGHT: 60px;}</div>
<div id="mainbox">
這里是#mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: #FFF;
}包含了#menu,#sidebar和#content
<div id="menu">這里是#menu{
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px 0px 0px 0px;
WIDTH: 400px;
BACKGROUND: #ccd2de;
}</div>
<div id="sidebar"><p>這里是#sidebar{
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
BACKGROUND: #F2F3F7;
WIDTH: 170px;
},背景顏色用的是#main的背景色</p></div>
<div id="content"><p>這里是#content{
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING:0px;
WIDTH: 400px;
BACKGROUND: #E0EFDE;}</p>
<p>這里是主要內容,根據內容自動適應高度</p><p>這里是主要內容,根據內容自動適應高度</p>
<p>這里是主要內容,根據內容自動適應高度</p>
</div>
</div>
<div id="footer">這里是#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 40px;
WIDTH: 580px;
}。</div>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
#body,div{FONT-SIZE:12px;}
#pagebox{
margin:0px;
PADDING:20px;
BACKGROUND: #FFF;
FONT-FAMILY: arial,'宋體','新宋體',verdana,sans-serif;
WIDTH:600px;
}
#header{
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: #ccd2de;
WIDTH: 580px;
HEIGHT: 60px;}
#mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: #FFF;
}
#menu{
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px 0px 0px 0px;
WIDTH: 400px;
BACKGROUND: #ccd2de;
}
#content{
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING:0px;
WIDTH: 400px;
BACKGROUND: #E0EFDE;}
#sidebar{
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
BACKGROUND: #F2F3F7;
WIDTH: 170px;
}
#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 40px;
WIDTH: 580px;
}
</style>
</head>
<body>
<div id="header">這里是#header{
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: #ccd2de;
WIDTH: 580px;
HEIGHT: 60px;}</div>
<div id="mainbox">
這里是#mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: #FFF;
}包含了#menu,#sidebar和#content
<div id="menu">這里是#menu{
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px 0px 0px 0px;
WIDTH: 400px;
BACKGROUND: #ccd2de;
}</div>
<div id="sidebar"><p>這里是#sidebar{
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
BACKGROUND: #F2F3F7;
WIDTH: 170px;
},背景顏色用的是#main的背景色</p></div>
<div id="content"><p>這里是#content{
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING:0px;
WIDTH: 400px;
BACKGROUND: #E0EFDE;}</p>
<p>這里是主要內容,根據內容自動適應高度</p><p>這里是主要內容,根據內容自動適應高度</p>
<p>這里是主要內容,根據內容自動適應高度</p>
</div>
</div>
<div id="footer">這里是#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 40px;
WIDTH: 580px;
}。</div>
</div>
</body>
</html>
相關Web標準教程:
- 相關鏈接:
- 教程說明:
Web標準教程-WEB2.0標準教程:第十天 自適應高度。