将div固定在页面底部

Question

我有一个使用position:absolute定位的div，我想把另一个div放在它下面。
这两个div宽度不同。
上面的div采用绝对定位并居中。 应该在底部的div具有100％的宽度。
如何实现？
谢谢！

- Jack

Answer 1

• 创建一个包含两者的 div
• 使用 float:right

示例:

div#p8015buttons {
    position:absolute;
    bottom:0.5em;
    right:0.5em;
    width:90px;
}
div.p8015 {
    float:right;
    margin:1px;
}

- o0'.

---

也就是说，一个绝对定位的容器 div，里面有两个静态定位的 div（它们会叠放在一起）。 - Dan

它们具有不同的宽度。底部 div 应该是整个屏幕宽度，但上面的 div 是绝对定位并且居中的。 - Jack

Answer 2

没有测试过，但应该可以。

HTML：

<div class="wrapper">
      <div class="one">
         Content
      </div>
      <div class="two">
         More content
      </div>
    </div>

还有CSS：

    .wrapper
    {
      position:absolute;
      width: 500px; 
      height: 400px;/*whatever you want*/
      }

    .one,
    .two
    {
      position:relative; /*or static*/
    }

希望能有所帮助 :)

- Kyle

Answer 3

测试 HTML 标记

<div class="wrapper">
<div class="left-ontent>
</div>
<div class="right-ontent>
</div>
</div>

CSS

.wrapper{width:980px;margin:0 auto;position:absolute;}
.left-content{float:left;width:630px;}
.right-content{float:right;width:320px;}

- user255631

---

这个想法是有两个不同宽度的div，其中一个是绝对定位，宽度固定居中，另一个没有宽度（应该与屏幕一样宽），第二个div应该在第一个div下方。 - Jack

Answer 4

试试这个，然后你可以将样式移动到你的CSS中

<div style="width:500px; margin: auto; height:200px; background-color:black;">
</div>
<div style="width:100%; height:200px; background-color:green;">
</div>

- Mauro

---

不存在 float: center; 这样的东西。http://www.w3schools.com/css/pr_class_float.asp - Kyle

抱歉，我拼错了第一个div的焦点。已经修改！ - Mauro

Answer 5

将两个 DIV 包装在第三个 DIV 中，并将该 DIV 的位置设置为绝对定位，而不是原始的 DIV。

- RoToRa