我想要一个 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

这个article describes a sticky footer：

• 屏幕上显示的页脚内容很少 - 我假设您的意思是在视口的末尾 (what is the viewport,article about viewport)
• 如果内容填满视口，则向下推页脚

您可以选择look at the gist 或example on 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>