Question

我正在使用twitter bootstrap＆＃34;粘性页脚＆＃34;示例代码。
粘性页脚工作正常，但现在我想＆＃34;填充＆＃34;通过使主体（或div）占据html元素的高度然后应用背景颜色来保留剩余空间。

HTML

<body>
<p>....</p>      
  <footer class="footer">
    <div class="container">
      <p>Place sticky footer content here.</p>
    </div>
  </footer>
</body>

CSS

html {
  position: relative;
 min-height: 100%;
  background-color: green;
   /* background-color: transparent; */
    border: 3px solid blue;

 } 

body {
background-color: tomato;
  padding-top: 20px;
  border: 3px solid black;
  min-height: 100%;
}


.footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background-color: #0bb;
}

这是一个有效的演示 - http://jsbin.com/xurulofame/1/edit?html,css,output

如何让BODY元素占据HTML元素的100％高度 - 因此用＆＃34;番茄＆＃34;填充背景。颜色？

Answer 1

使用此：

body {height:100vh;}

以及为您的body元素添加其余属性

Answer 2

在HTML中使用height:100%而不是使用min-height。结果为http://jsfiddle.net/z9h18xge/

Answer 3

请检查此代码。或链接到 fiddle

html{height:100%;}
body{
    margin:0;
    height:100%;
}
#wrapper{
    width:100%;
    height:100%;
    display:table;
    margin:0 auto;
}
#footer{
    width:100%;
    overflow:hidden; /*for FF on Windows 7*/
    display:table-footer-group;
    height:1%;
    background: #ccc;
    height: 100px;
}

<div id="wrapper"> <!-- table -->
    <div class="w1">
        <p>header and content of the page</p>
    </div>
    <div id="footer"> <!-- table-footer-group -->
            <p>footer content</p>
    </div>
</div>

如何使BODY元素占据HTML元素的100％高度？

3 个答案: