如何解决如何在屏幕底部正确放置div？
| 如果右侧单元格中的内容增加，我想将div放置在页面底部的左侧单元格中。我怎样才能做到这一点？ div位于#cell-right
<!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 style=\"vertical-align:bottom;height:100%;\">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\" style=\"position:relative\">
Lorem ipsum dolor ... bla bla bla
<div style=\"position:absolute; left:-185px; bottom:10px; width:180px\">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\" style=\"position:relative\">
Lorem ipsum dolor ... bla bla bla
<div style=\"position:absolute; left:-185px; bottom:10px; width:180px\">This is the div that needs to rest on the bottom vertically align on bottom</div>
</div>
style=\"position:absolute; bottom:0\"
style=\"position:relative;\"
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。