如何使这个嵌套页脚粘在底部？

发布于 2024-10-16 23:30:57 字数 1133 浏览 11 评论 0原文

我一直在尝试一些不同的事情，但我不确定如何使该页脚粘在底部。困难的出现是因为有许多彼此嵌套的 div。我想要实现的目标是让右边框和左边框包装器转到页面底部以包围页脚，但页脚应该位于页面底部。

解释一下所有嵌套的 div：主体应用了主要的平铺背景图像，#background 有一个透明的覆盖层，使其向边缘淡出。 border-right 和 border-left 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>

原文

I've been trying a few different things and I'm not sure how to make this footer stick to the bottom. The difficulty comes because there are a number of nested divs inside one another.
What I want to achieve is have the border-right and border-left wrappers go to the bottom of the page to surround the footer, but the footer should be at the bottom of the page.

to explain a bit all the nested divs: the body has the main tiling background image applied to it and #background has a transparent overlay that makes it fade out toward the edges.
the border-right and border-left divs have a repeating image as background that serves as borders to the content div.

And the footer div should be totally separate I know, but when I make it so it stays centered to the width of the window rather than the width of the border-left so it looks wonky when the screen gets shrunk down.

Basic page structure is as follows and I have also posted a 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

热鲨 2024-10-23 23:30:57

我的解决方案： 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>

My solution: 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>

回复收藏 0 原文