DIV+CSS布局，應(yīng)用越來(lái)越普遍，小的個(gè)人主頁(yè)、大的門(mén)戶網(wǎng)站，很多都采用了DIV+CSS布局。在設(shè)計(jì)過(guò)程中，有時(shí)會(huì)遇到一些問(wèn)題，要注意一下。且看下面的網(wǎng)頁(yè)截圖：
從截圖中， 我們可看出，
問(wèn)題1：右邊的內(nèi)容多時(shí)，會(huì)導(dǎo)致左邊露空白；或者左邊內(nèi)容多時(shí)，會(huì)導(dǎo)致右邊露空白。怎么解決？
問(wèn)題2：右邊那一大塊層的寬度應(yīng)該設(shè)置多少呢？設(shè)置小了，會(huì)與右邊界不對(duì)齊，設(shè)置大了，整塊層會(huì)被擠到下一行去。怎么辦？
其實(shí)，兩個(gè)問(wèn)題，都可歸結(jié)到同一個(gè)問(wèn)題，即如何使得層的高度或?qū)挾冗_(dá)到自適應(yīng)的效果？
且看下面的HTML和CSS代碼，詳細(xì)講解在CSS代碼注釋中：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="middleBody">
<div id="sider" class="column">
<p>心夢(mèng)帆影</p>
<p>心夢(mèng)帆影</p>
</div>
<div id="content" class="column">
<p>http://www.aygfsteel.com/rongxh7</p>
<p>http://www.aygfsteel.com/rongxh7</p>
<p>http://www.aygfsteel.com/rongxh7</p>
<p>http://www.aygfsteel.com/rongxh7</p>
<p>http://www.aygfsteel.com/rongxh7</p>
<p>http://www.aygfsteel.com/rongxh7</p>
<p>http://www.aygfsteel.com/rongxh7</p>
<p>http://www.aygfsteel.com/rongxh7</p>
<p>http://www.aygfsteel.com/rongxh7</p>
<p>http://www.aygfsteel.com/rongxh7</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
body {
margin-top:0px; /* 去除網(wǎng)頁(yè)上邊空白 */
}
/* 大容器，包含下面所有層 */
#container {
width:800px;
margin:0px auto; /* 居中 */
}
/* 頭部 */
#header {
width:100%;
height:100px;
background:#FFE1FF;
}
/* 中部，包括左邊區(qū)(sider)和右邊內(nèi)容區(qū)(content) */
#middleBody {
width:100%;
overflow:hidden; /* 隱藏超出的部分 */
}
/* 左邊 */
#sider {
width:200px;
float:left;
background:#FFE4E1;
}
/* 右邊主內(nèi)容區(qū) */
#content {
/* 此兩行是#content自適應(yīng)寬度的關(guān)鍵，旨在與右邊界對(duì)齊，且不被擠到下面去 */
padding-right:10000px;
margin-right:-10000px;
float:left;
background:#FFFAF0;
}
/* #sider和#content共同屬性，此為自適應(yīng)高度的關(guān)鍵，旨在#sider和#content下邊界對(duì)齊，且不會(huì)露白*/
.column {
padding-bottom:20000px;
margin-bottom:-20000px;
}
/* 底部 */
#footer{
clear:left; /* 防止float:left對(duì)footer的影響 */
width:100%;
height:80px;
background:#FFE4B5;
}
運(yùn)行截圖如下：
本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處，謝謝！http://www.aygfsteel.com/rongxh7（心夢(mèng)帆影JavaEE技術(shù)博客）
posted on 2009-12-14 02:19
心夢(mèng)帆影 閱讀(10312)
評(píng)論(7) 編輯 收藏 所屬分類:
Web前端開(kāi)發(fā)