Css 如何使嵌套的页脚粘到底部？_Css_Sticky Footer_Border_Html

Css 如何使嵌套的页脚粘到底部？

css html

Css 如何使嵌套的页脚粘到底部？,css,sticky-footer,border,html,Css,Sticky Footer,Border,Html,我一直在尝试一些不同的东西，我不知道如何使这个页脚粘到底。困难在于彼此之间有许多嵌套的div。我想要实现的是将右边框和左边框包装器放在页面底部以包围页脚，但是页脚应该在页面底部解释一下所有嵌套的div：主体应用了主平铺背景图像，背景有一个透明覆盖层，使其向边缘淡出。右边框和左边框div有一个重复的图像作为背景，用作内容div的边框页脚div应该是完全分开的，我知道，但是当我这样做的时候，它保持在窗口宽度的中心，而不是左边边框的宽度，所以当屏幕缩小时，它看起来不稳定基本页面结构如下，我还

我一直在尝试一些不同的东西，我不知道如何使这个页脚粘到底。困难在于彼此之间有许多嵌套的div。我想要实现的是将右边框和左边框包装器放在页面底部以包围页脚，但是页脚应该在页面底部

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

页脚div应该是完全分开的，我知道，但是当我这样做的时候，它保持在窗口宽度的中心，而不是左边边框的宽度，所以当屏幕缩小时，它看起来不稳定

基本页面结构如下，我还发布了一个JSFIDLE：

我的解决方案：

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

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

编辑：更新的小提琴

你应该。@zzzzBov我已经尝试过这里概述的技巧，但它在我的页面上不起作用：嗯。。我不知道你是否看到了一些不同的东西，但我觉得那只脚并没有贴到底。。。

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

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