两个 div 的垂直对齐和间距答案

【问题标题】：Vertical alignment and spacing for two divs两个 div 的垂直对齐和间距
【发布时间】：2011-02-02 22:37:14
【问题描述】：

我遇到了垂直对齐问题。我有 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 留出余量。有任何想法吗？

【问题讨论】：

问题一定消失了？
您在申请margin-top时希望看到什么？

标签： html css fullscreen vertical-alignment

【解决方案1】：

尝试为第一个 div 添加这个：

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

并从第二个删除margin-top

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

给任何元素一个绝对位置都会将其从文档流中移除。无论margin是多少，其他元素都不会受到影响。

【讨论】：