<body> <div id="wrap"> <div id="header"> HEADER </div> <div id="inner-wrap"> <div id="content"> CONTENT </div> </div> <div id="footer"> FOTTER </div> </div> </body>
和CSS:
html { height:100%; max-height:100%; } body { margin:0; padding:0; height:100%; max-height: 100%; } #wrap { min-height:100%; height: 100%; position:relative; } * html #wrap { height:100% } #inner-wrap { padding-bottom:50px; min-height: 100%; } #inner-wrap:after { content:" "; display:block; clear:both; } * html #inner-wrap { height:100%; } #header { width: 100%; background-color: #C0C0C0; height: 16px; color: White; text-align: center; position: relative; top:0px; } #footer { width: 100%; background-color: #C0C0C0; height: 50px; position:absolute; bottom: 0; color: White; text-align: center; } #content { width: 1000px; height: 100%; background-color: #F5FDEC; margin: 0 auto 0 auto; }
问题:
我怎么能做到这一点:HEADER top 16px,
内容动态100%高度,
FOOTER在页面末尾
如果我100%给内包装DIV,它们在页脚之后是白色空间.
谢谢