滚动浏览页面页脚的内容

时间：2009-11-27 08:55:15

标签： html css

在我的页面布局中，页脚保持不变，内容滚动到页脚。有没有办法让页脚位于内容的底部？您可以访问www.postcode53.com/layout.

查看网页的外观

HTML和CSS如下：

HTML                       住房伙伴                                         

        <div id="header-navigation">
            <ul>
                <li><a href="#">About Zach</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>



    </div>

    <div class="menu">
        <div class="menu-navigation">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Demo</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Sign UP!</a></li>
            </ul>
        </div>

    </div>

    <div id="image">
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    </div>

    <div class="menu">
        <div class="menu-navigation">
            <ul id="menulist">
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>

            </ul>
        </div>

    <div id="maincontent">

        <img src="data.jpg"></img>

        <div id="extra">
            <div id="newsletters">
                <div id="title"><h2>LazyZach Newsletters</h2></div>
            </div>

            <div id="navigation">
                <div id="title"><h2>Navigation</h2></div> 
                <ul id="extra-navigation">
                    <li>Home</li>
                    <li>Features</li>
                    <li>Demo</li>
                    <li>FAQ</li>
                    <li>Sign Up</li>
                    <li>About Zach</li>
                    <li>Contact</li>
                </ul>
            </div>

            <div id="boring-stuff">
                <div id="title"><h2>Boring Stuff</h2></div>
                <ul id="extra-navigation">
                    <li>Terms Of Use</li>
                    <li>Privacy Policy</li>
                    <li>Copyright Policy</li>
                    <li>Removal Notice</li>
                    <li>Partnet With Us</li>
                    <li>Abuse Desk</li>
                    <li>Contact Us</li>
                    <li>Sitemap</li>
                </ul>
            </div>

            <div id="overheard">
                <div id="title"><h2>Overheard on Twitter</h2></div>
            </div>
        </div>

    </div>
    <div id="footer">
        <center>LAZYZACH IS CREATED BY XYZ GROUP &copy; 2009. ALL RIGHTS RESERVED</center>
    </div>


</body>

CSS 

#header {
    margin:0 auto;
    overflow:hidden;
    padding:-5px 0;
    width:100%;
    background:#000000;

}

#banner {
    padding-left:35px;
}

#header-navigation {
    float:right;
    color:#ffffff;
    font-weight:bold;
    margin:0 80px 0 0;
    padding-right:20px;
    width:250px;


}
#header-navigation a {
    color:#C0C0C0;
    text-decoration:none;
}

#header-navigation ul li {
    display: inline;
    padding-right:8px;

} 

.menu {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#CCCCCC;
}



.menu-navigation {
    color:#ffffff;
    font-weight:bold;
    padding-left:0px;
}
.menu-navigation a {
    color:#666666;
    text-decoration:none;
}

.menu-navigation ul li {
    display: inline;
    padding-right:14px;

} 

#menulist li {
    padding-right:250px;
}

#menulist{
    padding-right:34px;
}

#image {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#ABDB2A;
    color:#FFFFFF;
    font-weight:bold;
}

#maincontent {
    background:white;
    position:absolute;

}

#extra {
    position:absolute;
    margin:0 auto;
    padding-right:30px;
    padding:1px;
    width:1335px;
    background:#AADB2C;
    color:#000000;
    font-weight:bold;
    border:1px solid;

}

#newsletters {
    float:left;
    margin-right:250px;




}

#navigation {
    float:left;
    margin-right:70px;


}

#boring-stuff {
    float:left;
    margin-right:70px;
}

#footer {
    background:#ffffff;
    position:fixed;
    bottom:0px;
    margin-top:10px;
    left:0;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    color:#666666;

}

#extra-navigation {
    list-style-type:none;
    padding-left:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    margin-top:-15px;
;


}

#extra-navigation li {
        margin-bottom:.5em;
}


#newsletters #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:0px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    margin-left:100px;





}


#navigation #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}




#boring-stuff #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}


#overheard {
    margin-left:600px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}

请帮助。 谢谢。

2 个答案:

答案 0 :(得分：1)

如果您希望页脚位于内容的底部，则需要认真重构布局。一些布局元素现在正在使用

position: absolute;

这就是为什么几乎不可能将页脚固定到内容的末尾。只有当您将所有布局元素设置为固定高度并因此计算页脚所需的位置时，才有可能。

我建议你摆脱绝对定位，然后页脚会自然地结束。

答案 1 :(得分：1)

的 MARKUP

我已经看完了。完全固定的标记，大量＆lt; / div＆gt;失踪所以我猜你的php或你在后端使用的任何东西搞砸了：

<div id="header">
    <img id="banner" src="HousingPartners.jpg">

    <div id="header-navigation">
        <ul>
            <li><a href="#">About Zach</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

<div class="menu">
    <div class="menu-navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Demo</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Sign UP!</a></li>
        </ul>
    </div>
</div>

<div id="image">
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
</div>

<div class="menu">
    <div class="menu-navigation">
        <ul id="menulist">
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
    </div>
</div>

<div id="maincontent">
    <img src="data.jpg">
</div>

<div id="extra">
    <div id="newsletters">
        <div id="title"><h2>LazyZach Newsletters</h2></div>
    </div>
    <div id="navigation">
        <div id="title"><h2>Navigation</h2></div>
        <ul id="extra-navigation">
            <li>Home</li>
            <li>Features</li>
            <li>Demo</li>
            <li>FAQ</li>
            <li>Sign Up</li>
            <li>About Zach</li>
            <li>Contact</li>
        </ul>
    </div>
    <div id="boring-stuff">
        <div id="title"><h2>Boring Stuff</h2></div>
        <ul id="extra-navigation">
            <li>Terms Of Use</li>
            <li>Privacy Policy</li>
            <li>Copyright Policy</li>
            <li>Removal Notice</li>
            <li>Partnet With Us</li>
            <li>Abuse Desk</li>
            <li>Contact Us</li>
            <li>Sitemap</li>
        </ul>
    </div>
    <div id="overheard">
        <div id="title"><h2>Overheard on Twitter</h2></div>
    </div>
    <div class="clear-all" style="clear: both; height: 0px;">&nbsp;</div>
</div>


<div id="footer">
    LAZYZACH IS CREATED BY XYZ GROUP © 2009. ALL RIGHTS RESERVED
</div>

的注意：

在上面的标记中，我在 div 中添加了一行名为 extra 的附加行：

    <div class="clear-all" style="clear: both; height: 0px;">&nbsp;</div>

这通常被称为清除div ，它使一个盒子完全环绕其中的所有元素，即使它们都是向左或向右浮动。

的 CSS

CSS中也有很多错误。看起来它是由Dreamweaver和Frontpage的流产孩子生成的。使用CSS：

#header {
    margin:0 auto;
    overflow:hidden;
    padding:-5px 0;
    width:100%;
    background:#000000;

}

#banner {
    padding-left:35px;
}

#header-navigation {
    float:right;
    color:#ffffff;
    font-weight:bold;
    margin:0 80px 0 0;
    padding-right:20px;
    width:250px;
}

#header-navigation a {
    color:#C0C0C0;
    text-decoration:none;
}

#header-navigation ul li {
    display: inline;
    padding-right:8px;

}

.menu {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#CCCCCC;
}



.menu-navigation {
    color:#ffffff;
    font-weight:bold;
    padding-left:0px;
}
.menu-navigation a {
    color:#666666;
    text-decoration:none;
}

.menu-navigation ul li {
    display: inline;
    padding-right:14px;

}

#menulist li {
    padding-right:250px;
}

#menulist{
    padding-right:34px;
}

#image {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#ABDB2A;
    color:#FFFFFF;
    font-weight:bold;
}

#maincontent {
    background:white;
}

#extra {
    margin:0 auto;
    padding-right:30px;
    padding:1px;
    width:1335px;
    background:#AADB2C;
    color:#000000;
    font-weight:bold;
    border:1px solid;

}

#newsletters {
    float:left;
    margin-right:250px;
}

#navigation {
    float:left;
    margin-right:70px;
}

#boring-stuff {
    float:left;
    margin-right:70px;
}

#footer {
    background:#ffffff;
    bottom:0px;
    margin-top:10px;
    left:0;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    color:#666666;
    text-align: center;
}

#extra-navigation {
    list-style-type:none;
    padding-left:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    margin-top:-15px;
}

#extra-navigation li {
    margin-bottom:.5em;
}


#newsletters #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:0px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    margin-left:100px;
}


#navigation #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}

#boring-stuff #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}


#overheard {
    margin-left:600px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}

所有这些东西应该给你一些接近你想要做的东西。我希望它对你有用。

相关问题
最新问题