html - 用边距保持页脚向下？-6ren

html - 用边距保持页脚向下？

转载作者：太空宇宙更新时间：2023-11-04 15:03:06

到目前为止，我几乎已经解决了所有错误，除了一个...页脚没有附加到底部。我不得不删除 relative 和 absolute 方法，因为内容会在页脚下延伸。所以我需要某种方法来动态扩展内容和页脚之间的区域，以将页脚保持在底部。有没有办法做到这一点？我有一个设置为 100% 高度的“box-divider”，但它似乎没有任何作用。

此处为实时代码 http://jordan.rave5.com/tmp/

CSS

            #body {
                transition: height 2s;
                -webkit-transition: height 2s;
                width: 74%;
                min-width: 1024px;
                height: auto !important;
                margin: 0 auto;
                margin-top: 20px;
                margin-bottom: 20px;
                padding: 10px;
                background-color: #080908;
                 -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                -khtml-border-radius: 10px;
                border-radius: 10px;
                -moz-box-shadow: 0px 0px 6px #000;
                -webkit-box-shadow: 0px 0px 6px #000;
                box-shadow: 0px 0px 6px #000;
                /* For IE 8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
                /* For IE 5.5 - 7 */
                filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
            }

            #body-content {
                display: none;
                height: 100%;
            }

            #box-divider {
                width: 75%;
                min-width: 1024px;
                height: 100%;
                margin: 20px auto 20px;
            }

            #footer {
                width: 100%;
                height: 150px;
                background-image: url(images/black-trans.png);
                background-repeat: repeat;
                padding: 0 0 20px;
            }

HTML

    <div id="background-overlay">
        <div id="background-gradient">

            <div id="header-image-grad">

                    <div id="header-container">
                        <div id="header">
                            <div id="navigation-container">
                                <div id="navigation">
                                    <span id="nav">Navigation Area...</span>
                                </div>
                            </div>
                        </div>
                    </div>

                <div id="header-image-border">
                    <img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" />
                    <div class="image-grad"></div>
                </div>

            </div>

            <div id="body">
                <div id="body-content"></div>
                <div class="loading"><img src="images/loading.gif" alt="Loading Content" /></div>
            </div>

            <div id="box-divider">
                &nbsp;
            </div>

            <div id="footer">
                <br />
                <div id="footer-content">
                    Footer Area...
                </div>
            </div>

        </div>
    </div>

最佳答案

众多版本中的一个...我在我的设计中使用了一个

Sticky footer

这就是我对我的网站所做的

html, body {height: 100%}

#wrap
{
    min-height: 100%;
}

#footer
{
    position: relative;
    margin-top: -58px;
    clear: both;
    color: #333;
    font-size: 10px;
    text-align: center;
    height: 85px;
    background-image: url(../images/footerBG.jpg);
    background-repeat: repeat-x;
}

负的上边距是什么诀窍...

HTML

<body>

<div id="wrap"><!--for sticky footer-->

   <div id="headerWrapper"></div>

   <div id="navWrapper"></div>

   <div id="main">
     <p>this is where your content fun crazy shenanigans will go</p>
   </div><!--main or content-->

</div><!-- STICKY FOOTER -->

<div id="footer"></div>

</body>

关于html - 用边距保持页脚向下？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16224477/