如何将一个div正确地定位在屏幕底部？

Question

如何将一个div正确地定位在屏幕底部？

4

如果右侧单元格的内容增长，我想将一个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>

- jim H

2个回答

0

给你想要放在底部的 div 添加 style="position:absolute; bottom:0"，并给父级 div（在这种情况下是 "content-left"）添加 style="position:relative;"。

- Philipp Horn

谢谢你的回答。我已经尝试过了，但是这个 div 不会移动到底部。 - jim H

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- podeig · Accepted Answer

使用您现有的相同css。只需将body更改为以下方式：

<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>