Question

我花了好几个小时试图解决这个问题，但没有任何结果。

我想要的是非常简单的（理论上）。我想要一个全屏网页，其标题始终位于顶部，页脚始终位于底部。内容是动态的。如果它超过页面，它应该增长，推动页脚。我希望在水平居中的内容中有一个980像素宽的div。我想给那个div一个不同颜色的背景颜色。如果内容只有一行文本，我仍然希望div（背景颜色）为页脚和页眉之间100％的空间。我做了一个色彩缤纷的例子：

enter image description here

到目前为止我的代码：

<html>
<head>
<style>
#container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header, #footer {
    height: 100px;
    width: 100%;
    background: red;
}
#body {
    height: 100%;
    width: 100%;
    background: blue;
}
#content {
    width: 980px;
    background: yellow;
}

</style>
<head>

<body>
<div id="container">
    <div id="header"></div>
    <div id="body">
    <div id="content">
        content
    </div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>

这段代码远非如此。首先，如果内容超出页面，则无法将页脚保留在页面底部。其次，我不知道如何包含980px居中的div。

Answer 1

要使内容居中，请使用margin: 0 auto;。这会将top和bottom的边距设置为0，并自动调整左右边距。您最有可能要问的是必须涉及JavaScript。您可以随时使用固定页脚，也可以将页脚放在内容的底部。

你问的不是很实际。如果你有很多内容，你的页脚无论如何都会被推下来。当页面上的内容很少时，听起来你想要将页脚放在底部。

我已经编写了一些代码来帮助您入门。 JavaScript提供您想要的效果。取消注释CSS高度或在div中添加大量内容，页脚将被按下。

<html>
<head>
    <style>
        body, #body, #header, #footer { width: 100%;margin: 0; padding: 0; }
        #header { height: 100px; background: #7eff02; }
        #footer { height: 100px; background: #ff5c01; }
        #content { width: 980px; background: #fcff00; margin: 0 auto;
            /*height: 3000px;*/
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script>

        $(document).ready(function () {
            var headerHeight = $("#header").height();
            var footerHeight = $("#footer").height();

            var resizeTimer;
            $(window).resize(function () {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(onWindowResize(), 100);
            });

            onWindowResize();

            function onWindowResize() {
                if ($("#content").height() < (window.innerHeight - headerHeight - footerHeight)) {
                    $("#content").css("height", (window.innerHeight - headerHeight - footerHeight));
                    $("#footer").css({ "position": "fixed", "bottom": "0" });
                }
                else {
                    $("#content").css("height", "");
                    $("#footer").css({ "position": "", "bottom": "" });
                }
            }
        });
    </script>
    <head>

        <body>
            <div id="container">
                <div id="header"></div>
                <div id="body">
                    <div id="content">
                        CONTENT
                    </div>
                </div>
                <div id="footer"></div>
            </div>
        </body>
</html>

Answer 2

试试这个：

body {padding:100px 0;}
#header, #footer {position:fixed;width:100%;height:100px;}
#header {top:0;}
#footer {bottom:0;}
#container {width:980px;margin:0 auto;}

但是当页眉或页脚内容超出设定的高度时，您会遇到其他问题。

Answer 3

我也有这个解决方案： http://jsfiddle.net/AZE4K/

body {
    padding:0;
    margin:0;    
}

#header, #footer {
    position: fixed;
    width:100%;    
}

#header {
    left : 0;
    top : 0;
    background-color:red;
    height:100px;
}

#footer {   
    left : 0;
    bottom : 0;
    background-color:green;
    height:50px;
}

#content {
    background-color : #111111;
    color:#DDDDDD;
    width:95%;
    height : 1500px;
    margin:auto;
    margin-top : 100px;
    margin-bottom: 50px;
}

<div id="header"></div>
<div id="content">
    <h1>Some text</h1>
</div>
<div id="footer"></div>

使用css修复页脚和页眉以及动态内容

3 个答案: