DivCSS布局實(shí)例:三行單列上下固定高度中間自適應(yīng)_DIV+CSS實(shí)例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
CSS布局:三行單列,上下固定高度,中間自適應(yīng),且內(nèi)容垂直居中。
firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 測試通過。
對于非ie內(nèi)核瀏覽器,通過設(shè)定display:table、display:table-row和display:table-cell來模擬表格的表現(xiàn)形式。
最外層#box { display:table; },高度100%,其子層#header/#main/#footer為{ display:table-row; },因此可以模擬表格的行效果,上下定高,則中間不定高的層自適應(yīng)高度。
#wrap層為{ display:table-cell; }模擬單元格,因此可以設(shè)定{ vertical-align:middle; },垂直居中。
由于Win IE不支持{ display:table; },因此,只能采取定位的方式實(shí)現(xiàn)。<!--[if IE]>內(nèi)是針對ie的設(shè)定。
示例代碼 [m.dounai2.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DivCSS布局實(shí)例:三行單列 上下固定高度 中間自適應(yīng)</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html,
body,
#box {
height:100%;
font:small/1.5 "宋體", serif;
}
body {
text-align:center;
}
#box {
text-align:left;
background:#666;
display:table;
width:80%;
margin:0 auto;
position:relative;
}
#box > div {
display:table-row;
}
#header,
#footer {
background:#fcc;
height:50px;
}
#main {
background:#ccf;
}
#main #wrap {
display:table-cell;
background:#ffc;
vertical-align:middle;
}
#text {
text-align:center;
}
</style>
<!--[if IE]>
<style type="text/css">
#header,
#footer {
width:100%;
z-index:3;
position:absolute;
}
#footer {
bottom:0;
}
#main {
height:100%;
z-index:1;
position:relative;
}
#main #wrap {
position:absolute;
top:50%;
width:100%;
text-align:left;
}
#main #text {
position:relative;
width:100%;
top:-50%;
background:#ccc;
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<div id="header">header</div>
<div id="main">
<div id="wrap">
<div id="text">
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DivCSS布局實(shí)例:三行單列 上下固定高度 中間自適應(yīng)</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html,
body,
#box {
height:100%;
font:small/1.5 "宋體", serif;
}
body {
text-align:center;
}
#box {
text-align:left;
background:#666;
display:table;
width:80%;
margin:0 auto;
position:relative;
}
#box > div {
display:table-row;
}
#header,
#footer {
background:#fcc;
height:50px;
}
#main {
background:#ccf;
}
#main #wrap {
display:table-cell;
background:#ffc;
vertical-align:middle;
}
#text {
text-align:center;
}
</style>
<!--[if IE]>
<style type="text/css">
#header,
#footer {
width:100%;
z-index:3;
position:absolute;
}
#footer {
bottom:0;
}
#main {
height:100%;
z-index:1;
position:relative;
}
#main #wrap {
position:absolute;
top:50%;
width:100%;
text-align:left;
}
#main #text {
position:relative;
width:100%;
top:-50%;
background:#ccc;
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<div id="header">header</div>
<div id="main">
<div id="wrap">
<div id="text">
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
<p>內(nèi)容內(nèi)容</p>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
查看最終的運(yùn)行效果:
代碼調(diào)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- CSS實(shí)例教程:用列表ul制作CSS橫向菜單的基礎(chǔ)知識
- DIVCSS菜單:超炫的菜單一張圖片實(shí)現(xiàn)鼠標(biāo)的兩種狀態(tài)及CSS當(dāng)前頁效果
- CSS布局實(shí)例:CSS標(biāo)簽切換代碼實(shí)例教程
- CSS實(shí)例:如何讓無空格的長字符在IE和FF下面實(shí)現(xiàn)自動換行?
- CSS布局實(shí)例:一個不錯的表格樣式
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語義
- 用css制作有滾動條的居中彈出框
- DivCSS實(shí)例:一個效果很不錯的CSS列表
- DIVCSS實(shí)例:一款不錯的CSS翻頁效果(DIGG)
- 如何用CSS實(shí)現(xiàn)翻頁效果?
猜你也喜歡看這些
- margin在垂直取值時取最大值
- 網(wǎng)頁中可以豎寫文字、象古代書籍那樣排版嗎?
- DIVCSS網(wǎng)頁布局:HTML結(jié)構(gòu)化DIVCSS網(wǎng)頁布局入門指南
- 符合WEB標(biāo)準(zhǔn)的div css導(dǎo)航下拉菜單
- CSS選擇符詳解
- Web標(biāo)準(zhǔn)設(shè)計技巧之三布局深入
- 有人說div CSS網(wǎng)頁布局比較愚蠢,我來說兩句!
- position:absolute絕對定位層奇怪的消失
- InternetExplorer對CSS樣式的限制以及解決方案
- 如何實(shí)現(xiàn)多風(fēng)格選擇樣式實(shí)時切換?
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實(shí)例-DivCSS布局實(shí)例:三行單列上下固定高度中間自適應(yīng)。