Question

好的，所以我读过其他一些人遇到过这个问题，但他们要么使用JS，要么解决方案对我不起作用。

我有这个：

// The Header //
/*            */
/*  CONTENT   */
/*            */
// The footer //

目前正在进行的工作可在以下网址找到：
http://newsite.carlsimmons.co.uk/

除了始终存在的垂直滚动条之外，它按预期工作。这是因为内容的高度设置为100％，+标题＆amp;页脚高度，你留下的东西总是大于页面。

我已尝试过绝对选项（在众多其他选项中），但它们都有错误或无法正常工作。只是认为必须有一些方法来实现这一点？我想我不应该太害怕使用JS，因为对于使用JS的人来说它看起来仍然很好，但不是很好的练习，并且可能会导致浏览器调整大小的延迟。

Answer 1

您可以使用calc(100% -20px)

http://www.w3.org/TR/css3-values/#calc

但是现在它只与Firefox兼容 http://hacks.mozilla.org/2010/06/css3-calc/

编辑：IE 9是第一个实现calc（）的主要浏览器（参见Andy E的评论）

Answer 2

如果你使用粘性页脚，你最终不会得到更大的页面。

一种可能的解决方案：

.wrapper {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

另一个：

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}

Answer 3

给你的页眉和页脚绝对位置，让你的身体顶部和底部边缘分别等于页眉和页脚的高度：

body {
    margin: 70px 0 110px;
}
body > header {
    position: absolute;
    top: 0;
}
body > footer {
    position: absolute;
    bottom: 0;
}

Answer 4

您还没有解释为什么绝对定位对您不起作用。没有javascript，拥有固定/绝对位置是唯一的方法。这就是我为了让它为我工作所做的一切。

基本上你的页脚是你的页脚。然后你有一个垫片，以防止身体完全隐藏在它后面。

如果你想要一个固定的标题，你可以做同样的事情 - 固定的真实标题和标题间隔符。

然后删除内容高度，因为您不再需要它了。

HTML：

<div class="footer_spacer">&nbsp;</div>
<div class="footer">
  footer content
</div>

CSS：

.footer
{
  bottom:           0;
  position:         fixed;
  width:            100%;
  z-index:          1000;
}

.footer_spacer
{
  height: 25px; /* you need to make this the same height as the footer */
}

Answer 5

您也可以尝试使用box-sizing属性：

height: 100%
padding: 20px 0;
-moz-box-sizing: padding-box;
     box-sizing: padding-box;

https://developer.mozilla.org/en/CSS/box-sizing

由理智的浏览器和IE8 +支持。

CSS - div的高度= 100％， - 20px

5 个答案: