Question

我一直在尝试一些不同的东西，我不知道如何让这个页脚粘到底部。之所以遇到困难是因为彼此之间有许多嵌套的div。我想要实现的是将border-right和border-left包装器放到页面底部以包围页脚，但页脚应位于页面的底部。

解释一下所有嵌套的div：正文应用了主要的平铺背景图像，而#background有一个透明的叠加层，使其向边缘淡出。 border-right和border-left div具有重复图像作为背景，用作内容div的边框。

我知道，页脚div应该是完全分开的，但当我这样做时，它会保持居中到窗口的宽度而不是边框的宽度 - 所以当屏幕缩小时它看起来很不稳定。 / p>

基本页面结构如下，我还发布了一个jsfiddle：http://jsfiddle.net/cutcopypaste/zry4T/

<body>
<div id="background">
    <div id="container">

        <div id="header">
            <div id="logo"></div>
            <div id="menu">
                <p>Menu</p>
            </div>
        </div>

        <div id="border-left">
            <div id="border-right">

                <div id="content">

                    <p>Page Content</p>     
                </div>
            </div>
        </div>
    </div>
        <div id="footer">
            <p>Footer</p>
        </div>
</div>
</body>

Answer 1

我的解决方案：http://jsfiddle.net/zry4T/15/

<body>
<div id="background">
    <div id="container">

        <div id="header">
            <div id="logo"></div>
            <div id="menu">
                <p>Menu</p>
            </div>
        </div>
        <div id="wrapper">
        <div id="border-left">
            <div id="border-right">

                <div id="content">

                    <p>Page Content</p>     
                </div>
            </div>
        </div>
        <div id="push"></div>
    </div>

</div>    <div id="footer">
            <p>Footer</p>
    </div>
</div>
</body>

<style type="text/css">
*
{
 margin: 0;
 padding: 0;
}
html, body
{
 height: 100%;
 line-height: 1.2;
}

body
{
 background: #000 url(../images/bg-pattern.png) center top repeat;
}

#background
{
 background: url(../images/overlay.png) center top repeat-y;
 min-width: 960px;
 padding-left: 1px;
}

#container
{
 background: red center top no-repeat;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -60px;   
 overflow: hidden;
 width: 960px;
 z-index: 10;
}

#header
{
}
#logo
{
 height: 114px;
 width: 960px;
}
#logo a
{
 border: none;
 display: block;
 height: 90px;
 margin: 60px auto;
 width: 640px;
}

#menu
{
 background-color: orange;
}

#border-left
{
 background: blue url(../images/border-left.png) repeat-y 1px -5px;
 height: 100%;
 margin: -4px auto 0;
 width: 912px;
}
#border-right
{
 background: blue url(../images/border-right.png) repeat-y 857px -5px;
 height: 100%;
}
#content
{
 background: yellow url(../images/stripes.gif) center top repeat;
 margin: 35px auto 0;
 min-height: 100px;
 padding: 8px 33px 110px;
 width: 738px;
 z-index: 10;
}

#push {height: 60px;}

#wrapper{
width:960px;
margin:o auto;
}
#footer
{
 background: green url(../images/footergradient.png) repeat-x;

 height: 60px;
 margin: 0 auto;
clear:both;
 text-align: center;
 width: 808px;
}
</style>

Answer 2

这是否指向正确的方向？

http://jsfiddle.net/zry4T/28/

我基本上将页脚完全放在包装器的底部，并确保包装器至少与内容一样高。

编辑：更新小提琴

如何让这个嵌套的页脚粘到底部？

2 个答案: