div位于#cell-right和菜单项1之间.
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML> <head> <Title>sd</Title> <style type="text/CSS"> HTML,body { wIDth:100%; background:#6f711a; border:0px solID red; margin:0; padding:0; Font-family:Arial; } #wrapper { wIDth:1220px; padding:0; margin:10px auto; background:#ccc; border:3px solID white; } #content { background:#444; float:left; wIDth:100%; min-height:620px; padding:0; margin:0; border:0px solID; } #cell-left { background-color:#444; float:left; wIDth:195px; height:100%; padding:0; margin:0; border:0px solID; } #cell-right { float:right; wIDth:1025px; height:100%; padding:0; margin:0; border:0px solID; } #footer { background-color:#000; color:#fff; clear:both; height:25px; padding:4px; margin:0; text-align:center; border:0px solID; } #cell-right #content-right{ padding:10px 10px 0 10px; } #cell-left #content-left{ padding:0; margin:0; } #content-left { position:relative; height:100% } #content-right { background:#f1f1f1; } #content-left ul li a { border-bottom: 1px solID #fff; color: white; display: block; overflow: auto; padding: 10px; text-decoration: none; } ul { border: 0 none; Font: bold 13px Verdana; List-style-type: none; margin: 0; padding: 0; wIDth: 100%; } </style> </head> <body> <div ID="wrapper"> <div ID="content"> <div ID="cell-left"> <div ID="content-left"> <ul> <li><a href="#">menu item 1</a></li> </ul> <div >vertically align on bottom</div> This is the div that needs to rest on the bottom </div> </div> <div ID="cell-right"> <div ID="content-right"> Lorem ipsum dolor sit amet consectetuer eget at enim ac eget. Tellus nibh non ut congue montes parturIEnt natoque odio at ipsum. ID aliquet ante arcu feugiat Lorem dis ut libero laoreet dui. ID tincIDunt elit Nulla ut elit Nulla dui ullamcorper magnis ipsum. Turpis Donec risus Proin tristique egestas hendrerit Vestibulum sed ut orci. Pede adipiscing a et magna ultrices ipsum Aenean a ut laoreet. Sed vitae vitae eu nibh pellentesque quis orci vitae at Aenean. .. lots more of text here .. </div> </div> </div> <div ID="footer">sdsd</div> </div> </body></HTML>解决方法 使用你现在拥有的相同CSS.只需改变这样的身体： <body><div ID="wrapper"> <div ID="content"> <div ID="cell-left"> <div ID="content-left"> <ul> <li><a href="#">menu item 1</a></li> </ul> </div> </div> <div ID="cell-right"> <div ID="content-right" > Lorem ipsum dolor ... bla bla bla <div >This is the div that needs to rest on the bottom vertically align on bottom</div> </div> </div> </div> <div ID="footer">sdsd</div></div></body>
其实我改变了这些方面：
<div ID="content-right" > Lorem ipsum dolor ... bla bla bla <div >This is the div that needs to rest on the bottom vertically align on bottom</div> </div>总结
以上是内存溢出为你收集整理的html – 如何在屏幕底部正确定位div？全部内容，希望文章能够帮你解决html – 如何在屏幕底部正确定位div？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）