如何在屏幕底部正確 position 一個 div？
[英]How do I correctly position a div at the bottom of the screen?
問題描述
如果右側單元格中的內容增長，我想在左側單元格的頁面底部 position 一個 div。 我怎樣才能做到這一點？
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 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>
2 個解決方案
解決方案1
2 已采納 2011-05-25 13:34:15
使用與您現在相同的 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>
解決方案2
0 2011-05-25 13:27:25
在底部給你想要的 div 一個style="position:absolute; bottom:0"和父 div（在本例中為“content-left”）一個style="position:relative;"
如何根據窗口大小將div放置在div之后或底部？ （圖片示例）
[英]How do I position a div after a div or at the bottom depending the window size? (image example)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.