页眉和页脚之间的高度为100％

I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).

我正在尝试创建一个页眉/页脚(100%宽度,145px高度),页眉/页脚之间的“主要区域”(100%宽度,动态高度)和围绕内容的容器的网页布局独特的背景颜色(860px宽度,动态高度,但始终与页脚“齐平”)。

(See Example for a visual)

(见视觉示例)

The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.

我遇到的问题是,当内容很少时,我似乎无法让“内容容器”始终与页脚齐平。如果存在可观的/“正常”内容量或者窗口调整大小,则使用类似(原始示例)的设置会导致页脚浮动在内容上。

And the Following CSS results in a gap between the content and the footer.

以下CSS导致内容和页脚之间存在差距。

html,body{
   margin:0;
   padding:0;
   height:100%;
  background:yellow;
}

.wrap{
   min-height:100%;
   position:relative;
}

header{
  background:blue;
   padding:10px;  
}

#content{
  height:100%;
  width: 400px;
  margin:0 auto;
  background:orange;
    padding:30px;
}
footer{
  background:blue;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
}

How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?

当内容最小并且页脚“粘贴”到页面底部时,如何使内容容器成为屏幕的整个高度,同时如果存在正常数量的内容,则还可以动态调整大小(页脚是总是在内容的底部)?

Thank you!

2 个解决方案

#1

FIDDLE: http://jsfiddle.net/3R6TZ/2/

Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/

小提琴输出:http://fiddle.jshell.net/3R6TZ/2/show/

CSS

html, body {
    height: 100%;
    margin:0;
}
body {
    background:yellow; 
}
#wrapper {
    position: relative;
    min-height: 100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
#header {
    width: 100%;
    height: 150px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#content {
    background:pink;
    width:400px;
    margin:0 auto -30px;
    min-height:100%;
    height:auto !important;
    height:100%;
}
#content-spacer-top {
    height:150px;
}
#content-spacer-bottom {
    height:30px;
}
#divFooter {
    width:100%;
    height: 30px;
    background:blue;
}

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-spacer-top"></div>
        <div id="content-inner">
            **Content Goes Here**
        </div>
        <div id="content-spacer-bottom"></div>
    </div>
    <div id="divFooter">Footer</div>
</div>

UPDATE

The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.

#content-spacer-top和#content-spacer-bottom用于填充#content div而不使用填充或边距,这会增加超过100%高度的框大小,从而导致问题。

In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.

在CSS3中,有一个box-sizing属性(这里有更多信息)可以解决这个问题,但我假设你不想依赖CSS3功能。

EDIT

Added a fix and tested down to IE7

添加了修复程序并测试到IE7

UPDATE 2

Alternate method using :before and :after pseudo-elements instead of the spacer divs: http://jsfiddle.net/gBr58/1/

替代方法使用:before和:after伪元素而不是spacer divs:http://jsfiddle.net/gBr58/1/

Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean

虽然在IE7或6中不起作用,并且要在IE8中工作,必须声明(根据w3schools.com),但HTML很干净

UPDATE 3 (Sorry for so many updates)

更新3(很抱歉这么多更新)

Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...

更新它以适应IE6。我通常不会打扰,因为我的公司不支持IE6,但它很容易解决...

#2

I think you need position: fixed on the footer:

我认为你需要的位置:固定在页脚上:

footer {
    width: 100%;
    height: 30px;
    position:fixed;
    bottom:0;
}

#1