0

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

解释一下所有嵌套的 div：body 应用了主要的平铺背景图像，#background 有一个透明的覆盖层，使其向边缘淡出。右边界和左边界 div 有一个重复的图像作为背景，作为内容 div 的边界。

我知道页脚 div 应该是完全独立的，但是当我让它保持居中时，它会以窗口的宽度而不是左边框的宽度为中心，所以当屏幕缩小时它看起来很不稳定。

基本页面结构如下，我还贴了一个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>
4

2 回答 2

0

这是否为您指明了正确的方向？

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

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

编辑：更新小提琴

于 2011-12-17T00:25:03.780 回答
0

我的解决方案：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>
于 2011-02-12T07:36:41.663 回答