1

我知道有很多相同的主题，但是有没有任何 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>

代码在这里： //jsfiddle.net/TsRkB/

谢谢 ！

4

3 回答 3

3

如果您使用 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>
于 2013-07-10T23:38:00.147 回答
1

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

随着CSS flex 模型的出现，解决这个问题变得非常非常容易：虽然 Flexbox 以在水平方向布局内容而闻名，但实际上对于垂直布局问题同样有效。您所要做的就是将垂直部分包裹在一个弹性容器中，然后选择要扩展的部分。它们会自动占用容器中的所有可用空间。

请注意标记和 CSS 是多么简单。没有桌子黑客或任何东西。

所有主要浏览器以及据称 IE11+ 都支持flex 模型，尽管我的 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>

于 2014-10-25T00:12:37.603 回答
-2

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

#footer{
background-color: lime;
bottom: 0;
height: 10%;
left: 0;
position: relative;
right: 0;
top: -10%;
}
于 2013-07-10T22:53:52.373 回答