CSS - Height of div = 100%, -20px

Question

好的，所以我读过一些其他人也有这个问题，但他们要么求助于JS，要么解决方案根本不适合我。

我有这个:

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

目前正在进行的工作可以在:
http://newsite.carlsimmons.co.uk/

除了始终存在的垂直滚动条之外，它的工作方式与预期一样。这是因为内容的高度被设置为100%，+header &页脚的高度和你留下的东西总是大于页面

我尝试过绝对选项(在许多其他选项中)，但它们都有缺陷或不起作用。只是在想一定有什么方法可以做到这一点吗?我想我不应该太害怕使用JS，因为它仍然会看起来很好与JS的人，但不是很好的做法，可能会导致一些延迟浏览器调整大小。

Answer 1

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

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

但目前它只兼容Firefoxhttp://hacks.mozilla.org/2010/06/css3-calc/

编辑:ie9是第一个实现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分别等于你的页眉和页脚的高度:

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+也支持