![ipsumLorem]( "ipsumLorem")
在我的页面布局中，页脚保持原样，而内容滚动到页脚之外。有什么方法可以将页脚保持在内容的底部？您可以通过访问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 © 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;}请帮忙。谢谢。 最佳答案 标记我看完了。完全固定的标记，很多丢失了，所以我猜您的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;"> </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;"> </div>通常将其称为Clearing div，它使盒子完全包裹其中的所有元素，即使它们都是左右浮动。的CSSCSS中也有很多错误。看起来它是由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;}所有这些东西都应该为您提供接近您想要制造的东西。希望对您有用。关于html - 内容滚动超过页面页脚，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1807531/ 10-13 02:37