- <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,它们在页脚之后是白色空间.
谢谢