【示例】
min-height: 25em;
三列弹性版式
【示例效果】
-
HTML
<div id="container"> <div id="header"> <h1>页眉区域</h1> </div> <div id="wrapper"> <div id="content"> <p><strong>1.主体内容区域</strong></p> </div> </div> <div id="navigation"> <p><strong>2.导航栏</strong></p> </div> <div id="extra"> <p><strong>3.其他栏目</strong></p> </div> <div id="footer"> <p>页脚区域</p> </div> </div>
-
CSS
/*---------------------------------------------- *页面基本属性*/ html, body, h1, p { margin: 0; padding: 0; } body { text-align: center; text-shadow: 1px 1px 1px #A4A4A4; /*padding-left:240px;*/ } a { color: #006; } /*页面基本属性结束 ----------------------------------------------*/ /*---------------------------------------------- *装饰*/ div#header { background: #EEE; color: #79B30B; } div#navigation { background: #B9CAFF; color: #FF8539; } div#extra { background: #FF8539; color: #B9CAFF; } div#footer { background: #444; color: #ddd; } /*-----------------------------*/ div#header { height: 100px; line-height: 100px; } div#content { height: 100px; line-height: 100px; } div#navigation { height: 100px; line-height: 100px; } div#extra { height: 100px; line-height: 100px; } div#footer { height: 60px; line-height: 60px; } /*装饰结束 ----------------------------------------------*/ /*---------------------------------------------- *布局*/ div#wrapper { /* 主栏基本样式 */ float:left; /* 向左浮动 */ width:50% /* 百分比宽度 */ } div#navigation { /* 导航栏基本样式 */ float:left; /* 向左浮动 */ width:25%; /* 百分比宽度 */ } div#extra { /* 其他栏基本样式 */ float:left; /* 向左浮动 */ width:25%; /* 百分比宽度 */ } div#footer { clear:both; /* 清除左右浮动 */ width:100% /* 满屏显示 */ } /*布局结束 ----------------------------------------------*/