上中下三栏自适应高度CSS布局

发表日期：2015-11-23 文章编辑：南昌开优网络浏览次数：4144 标签：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全局定义样式