上中下三欄自適應高度CSS布局

發表日期：2015-11-23 文章編輯：南昌開優網絡瀏覽次數：4526 標簽：CSS應用

<!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>CSS布局：上中下三欄自適應高度CSS布局-開優網絡</title> 
<STYLE type="text/css"> 
*{margin:0;padding:0;} 
body, html { 
margin: 0; 
padding:0 !important; 
padding:90px 0 32px 0; 
width:100%; 
height:100%; 
overflow:hidden; 
} 
.header { 
background: #C9F; 
width: 100%; 
height: 90px; 
overflow: hidden; 
position: absolute; 
top: 0; 
width: 100%; 
text-align: center; 
background-color: #FFCC00; 
} 
.content { 
position:absolute!important; 
position:relative; 
top:90px!important; 
top:0; 
bottom:32px; 
width:100%; 
overflow:hidden; 
height:auto!important; 
height:100%; 
left: -3px; 
} 
.main { 
height:100%; 
background:#66CCFF; 
overflow-y:auto; 
text-align:center; 
} 
.footer { 
background: #9CF; 
width: 100%; 
height: 40px; 
color: #e1efff; 
line-height: 32px; 
letter-spacing: 1px; 
text-align: center; 
clear: both; 
position: absolute; 
bottom: 0; 
left: 0; 
background-color: #FF6600; 
} 
</STYLE> 
</head> 

<body> 
<!-- 代碼 開始 --> 
<div class="header"> 
<br />這里是頂部 
</div> 
<div class="content"> 
<div class="main"> 
<br /><br />網頁header和footer高度是固定的，中間的content高度自適應瀏覽器窗口高度代碼，隨著窗口的大小變動都是滿屏的。 
</div> 
</div> 
<div class="footer"> 
這里是底部 
</div> 
<!-- 代碼 結束 --> 
</body> 
</html>

返回列表

上一篇：4種CSS3效果(360度旋轉、旋轉放大... 下一篇：CSS全局定義樣式

欧美日韩一区二区三区四区不卡,日韩欧美视频一区二区三区四区,久久精品欧美一区二区三区不卡,国产精品久久久乱弄

上中下三欄自適應高度CSS布局