内容不占用整个页面时的 CSS Sticky Footer答案

【问题标题】：CSS Sticky Footer when content does not take up entire page内容不占用整个页面时的 CSS Sticky Footer
【发布时间】：2013-05-30 13:32:46
【问题描述】：

我有两个页面，它们的区别仅在于 content-box div 标记中包含的内容。你可以在这里看到它们：

Tall Version

Short Version

我在下面包含了 short 版本的 html/css 代码。我希望显示 short 版本，这样如果内容量没有填满整个页面，页脚仍然会粘在底部以及页眉和页脚之间的整个区域屏幕中间是白色对应content-box div。

我需要改变什么来完成这个？\

更新 1 我按照@smallworld 的建议创建了一个新页面。可以看到here。这有一个粘性页脚，但我希望外部“容器”框可以扩展页面的高度。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
    <html lang="en">
        <head>
            <meta http-equiv="Content-Type" content=
            "text/html; charset=us-ascii">
            <style type="text/css">


                #main {
                    width: 100%;
                    min-height: 100%;
                    height: 100%;
                }

                body {
                    width: 100%;
                }


                #header,#content { position:relative; right:0;left:0}

                #header{
                    height:75px; top:0;
                    background: #4396CA;
                }
                #footer{
                    width: 100%;
                    position: relative;
                    height:50px;
                    bottom: 0;
                    left: 0;
                    background: #4396CA;
                }
                #content{
                    top:00px;
                    background: #F0F8FF;
                    min-height: 100%;
                    height: 100%;
                }

                #content-box {
                    width: 950px;
                    margin: 0 auto;
                    background-color: #FFFFFF;
                    text-align: left;
                    border-right: 1px solid #B0B0B0;
                    border-left: 1px solid #B0B0B0;
                    padding-bottom: 20px;
                    padding-top: 20px;
                    min-height: 100%;
                    height: 100%;
                }

            </style>
            <title>EmbeddedAnalytics - Test Page</title>
        </head>
        <body>
            <div id="main">
                <div id="header">this is header</div>
                <div id="content">
                    <div id="content-box">
                        <b>Content does not take up all of box.  But still want footer to "stick" to bottom</b><br>
                        line1<br>
                        line2<br>
                        line3<br>
                      Last Line<br></div>
                </div>
                <div id="footer">footer</div>
            </div>
        </body>
    </html>

【问题讨论】：

Is that what you want ?
是的 - 我搜索了“粘性页脚”，但显然没有正确地做某事。
这是我基于的一个页面：pud.ca/misc/testcase/fullheight.html 我认为让这更复杂的是“内容”中的“内容框”。我见过的大多数粘性示例都是基本的，因为只有三个块：页眉、内容、页脚。
您的代码与 fullheight.html 示例完全不同。在他们的示例中，body 和 html 有 height: 100%，页脚是绝对定位的，等等。尝试按照这些示例之一进行操作，如果遇到问题，请寻求帮助。
是的 - 我从 fullheight.html 示例开始。但我不得不分叉它，因为我的页面有嵌套容器。所以它是不同的。请参阅更新 1

标签： html css

【解决方案1】：

编辑：请参阅 http://jsfiddle.net/smallworld/gcpNh/ 的 jsfiddle - 我在您的示例中使用了 class="xyz" 而不是使用 id="xyz" 。我知道伸展到 100% 高度不应该那么困难和压力，但实际上，它是。我能感受到你的痛苦，这就是为什么我会尽我所能提供帮助。我又做了一个更正——它应该是 padding-bottom，而不是“main”类的 margin-bottom。

CSS：

html {  height:100%;min-height:100% !important;margin:0;padding:0;   /** see height, min-height values here. **/ }
body{  overflow:auto;padding:0;margin:0;height:100%;min-height:100% !important;   /** see height, min-height values here. **/ }
.main { 
  position:relative;min-height:100%; height:auto; background:cyan;   
  /** see position, height, min-height values here. Height auto to make sure 
      that main div resizes if window size changes after initial rendering **/ 
}
.header { display:block;height:50px;position:relative;background:yellow;text-align:center;padding:10px; }
.content { padding:20px;margin-bottom:50px; /** bottom margin here to make sure that footer does not cover the content area **/  }
.footer { display:block;position:absolute;bottom:0;left:0;width:100%;height:50px;background:red;color:white;text-align:center;padding:10px;  /** see position, top, left, and width properties here. **/  }

HTML

<div class="main clearfix">
    <div class="header">header</div>
    <div class="clearfix content">
        <h1>Goal of this fiddle is to demonstrate sticky footer implementation</h1>
        And domonstrate this with least amount of CSS and HTML, without using any extraordinary hacks. 
        <p>Your content goes in here. Add lot more content, and resize browser window to several different sizes to see how your page is rendered as compared to with very little content.</p>
    </div>        
    <div class="footer">footer</div>
</div>

【讨论】：

@MSchenkel - 不，您没有进行建议的更改。检查您的 DOCTYPE，body 元素上没有指定高度、最小高度。您需要阅读并实施所有建议的项目符号（它尽可能简短和甜蜜）。说真的，如果您需要帮助，请付出一些认真的努力。否则，我不会（除非我在提问之前完全没有看到任何努力）但这里的许多其他人会否决您的问题。
对此感到抱歉。没想到 DOCTYPE 会有所不同（事实并非如此）。我修改了身体标签以具有高度和最小高度。否则已进行其他更改。现在看看embeddedanalytics.com/eashort1.html - 我想让外面的浅蓝色容器拉伸页面的整个长度。相信我——我为此付出了很多努力。困难在于我不得不更改其他示例以适应嵌套容器盒。
@MSchenkel 我用代码和 jsfiddle 的链接完全改变了我的答案。
我想就是这样。所以我真正想要的是一个嵌套在这样一个盒子里的盒子：jsfiddle.net/bhbu7/4我会在我的网站上试试。
@MSchenkel 如果它满足您的需求，请不要忘记“接受”这个答案。我组织了一个大型网页设计聚会小组（约 900 名成员），我不记得开发人员遇到的任何其他 CSS 问题比这更多。那里有很多例子，其中大多数并不简单和简洁，所以我想...... hack，我会为你整理这个小提琴，并与下次询问我关于粘性页脚的任何人分享 - 一次性投资。我很高兴它似乎是您正在寻找的东西。