Question

我知道有很多相同的主题，但是有没有任何CSS方法可以在高度为百分比的情况下粘贴一个页脚，而不会因为绝对位置而溢出主体和标题？

我正试着坚持这个：

html,body{
    height: 100%;
}

#header{
    background-color: yellow;
    height: 100px;
    width: 100%;
}

#holder {
    min-height: 100%;
    position:relative;
}

#body {
    padding-bottom: 100px;
}

#footer{
    background-color: lime;
    bottom: 0;
    height: 100%;
    left: 0;
    position: relative;
    right: 0;
}

使用html：

<div id="holder">
    <div id="header">Title</div>
    <div id="body">Body</div>
    <div id="footer">Footer</div>
</div>

此处代码：http://jsfiddle.net/TsRkB/

谢谢！

Answer 1

如果您使用display：table作为基础，那么您的粘性页脚可以是任意大小，如果内容增长，它将被推下。

http://dabblet.com/gist/5971212

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    width:80%;
    }
.tr {
    display:table-row;
    background:turquoise
    }
section.tr {
    height:100%;
    background:yellow
    }

代表

<header class="tr"> <h1>title</h1><p>make me grow</p></header>
<section class="tr"><article>article</article></section>
<footer class="tr"> <p>Footer</p><p>make me grow</p></footer>

Answer 2

所有其他解决方案都已过时且存在一个主要缺点：如果页脚的高度可变或未知，它们将无效。

随着CSS flex model的出现，解决这个问题变得非常非常容易：虽然主要用于在水平方向上布置内容，但Flexbox实际上也适用于垂直布局问题。您所要做的就是将垂直部分包装在Flex容器中，然后选择要扩展的部分。它们会自动占用容器中的所有可用空间。

注意标记和CSS有多简单。没有桌子或任何东西。

flex模型是supported by all major browsers以及涉嫌IE11 +，尽管我的IE还没有正确呈现这个片段。

html, body {
  height: 100%;
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#body {
  flex: 1;
  border: 1px solid orange;
}

#footer{
  background: lime;
}

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

Answer 3

为您修复它，基本上必须将页脚放在包装器外面并向上移动... http://jsfiddle.net/sMdmk/4/

#footer{
background-color: lime;
bottom: 0;
height: 10%;
left: 0;
position: relative;
right: 0;
top: -10%;
}

粘性页脚，高度可变

3 个答案: