Question

到目前为止，我几乎已经看到了所有的错误，除了一个...页脚再次没有附着在底部。我不得不删除相对和绝对方法，因为内容将在页脚下拉伸。因此，我需要某种方式来动态扩展内容和页脚之间的区域，以使页脚保持在底部。有没有办法可以做到这一点？我有一个“盒子分隔器”设置为100％的高度，但它似乎没有做任何事情。

此处的实时代码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>

Answer 1

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

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>

用保证金来缩小页脚？

1 个答案: