css - 我想要一个 100% 身体高度的 CSS 布局

Question

到目前为止，我已经取得了很大的进步。我有粘性页脚以我想要的方式工作，即

如果内容很少，则在屏幕上显示页脚。如果有很多内容推倒它:)

所以我想做的是在我的身体内容周围有一个漂亮的小边框，直到它到达页脚:)

唉，我无法做到这一点，我只能做到这一点：http: //jsfiddle.net/dcf104/ZQEGw/

Can you adise me on some additional code?
Maybe I need some extra <divs>?

你可以看到红边只能走这么远......

我怎样才能让它们一直到页脚？

非常感谢，非常感谢您的帮助

Answer 1

像这样设置 .page-wrap ：

.page-wrap {
      margin-bottom: -180px;
      height: 100%;
 }

http://jsfiddle.net/ZQEGw/1/

Answer 2

本文描述了一个粘性页脚：

• 屏幕上的内容很少显示页脚 - 我假设您的意思是在视口的末尾（什么是视口，关于视口的文章）
• 如果内容填满视口，则将页脚向下推

您可以查看要点或codepen 上的示例

CSS

html, body { margin:0; padding:0; height:100%; }
#container { min-height:100%; position:relative; }
#header { background:#ff0; padding:10px; }
#body { padding:10px; padding-bottom:60px;  /* Height of the footer */ }
#footer { position:absolute; bottom:0; width:100%; height:60px;         
            /* Height of the footer */ background:#6cf; }

基本的html结构

   <div id=container>
     <div id=header>
     </div>
     <div id=body>
     </div>
     <div id=footer>
     </div>
   </div>