Question

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

我在下面列出了简短版本的html / css代码。我希望显示短版本，这样如果内容量没有填满整个页面，页脚仍然会粘到底部和页眉和页脚之间的整个区域屏幕中间是与内容框 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>

Answer 1

编辑：请参阅http://jsfiddle.net/smallworld/gcpNh/处的jsfiddle - 我在您的示例中使用了class =“xyz”而不是使用id =“xyz”。我知道伸展到100％的高度不应该那么困难和压力，但事实上，它是。我感觉到你的痛苦，这就是尽可能多地帮助我的原因。我做了一个更正 - 它应该是填充底部，而不是“主”类的边缘底部。

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>

当内容不占用整个页面时，CSS Sticky Footer

1 个答案: