huntout.me

CSS Height 100%

Feb 11, 2014

使用纯 CSS 实现 Height 100% 布局。

CSS:

body, html {
 border: 0;
 margin: 0;
 padding: 0; 
 height: 100%;
 position: relative;
 width: 100%;
}

#head {
 position: absolute;
 background-color: #98a;
 height: 100px;
 width: 100%;
 top:0;
}

#footer {
 position: absolute;
 background-color: #e46;
 width: 100%;
 height: 20px;
 bottom: 0;
}

#content {
 position: absolute;
 background-color: #dee;
 height: auto;
 top: 100px;
 bottom: 20px;
 width: 100%;
}

HTML:

<body>
  <div id="head">#head</div>
  <div id="footer">#footer</div>
  <div id="content">#content</div>
</body>

这里是 Demo

取自 StackOverflow 上的问答 CSS3 Height 100%

Enjoy it!