Question

我遇到了垂直对齐问题。我有2个div。第一个具有自动高度（取决于浏览器大小），另一个具有固定高度并位于页面底部。此外，第二个div需要保证金。

我想做的一个确切示例：

http://img199.imageshack.us/img199/9569/79106387.jpg

我试过了：

<html>
<body>
<style>
* { margin: 0; padding: 0; }
body { background: #a7daf6; }
</style>

<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6"> </div>

<div style="width:200px; height:40px; position:absolute; background:#eee; bottom:0; opacity:0.6"> </div>

</body>
</html>

但是我不能给第二个div留余。有任何想法吗？

Answer 1

尝试为第一个div添加此内容：

<div style="width:200px; position:absolute; top:0px; bottom: 42px; background:#000; opacity:0.6"> </div>

并从第二个

中删除margin-top

Answer 2

如果我理解正确，您只需申请第一个<div>此款式：top:-42px。

如果您需要<div>内的内容，则可以使用<div>添加其他padding-top: 42px。

像这样：

Live Demo

<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6; top:-42px">
    <div style="padding-top:42px; color:#fff">hello</div>
</div>

Answer 3

赋予任何元素绝对位置将从文档流中删除它。无论边际是什么，其他元素都不会受到影响。

垂直对齐和两个div的间距

3 个答案: