3

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

高版本

精简版

我在下面包含了简短版本的 html/css 代码。我想要显示短版，这样如果内容量没有填满整个页面，页脚仍然会粘在底部，并且屏幕中间的页眉和页脚之间的整个区域是白色对应于内容框div。

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

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

    <!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>
4

1 回答 1

3

编辑：请参阅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>
于 2013-05-30T03:02:22.257 回答