Javascript 使用css进行对齐和填充

我想要一个包含两个其他div的div，一个top div和一个bottom div。top div应该与top对齐并具有自动高度，这取决于top div的内容。bottom div应该填充父div的空白区域

我只想使用CSS进行对齐。我不想自己计算任何位置或尺寸

我尝试了以下方法：

(一)

问题：如果调整了父级的大小，则底部div应该向下移动一些像素

(二)

问题：如果调整父级的大小，则底部的div应该变小

使用javascript的解决方案可能如下所示： 这是一个不使用javascript的解决方案吗？

好吧，这个怎么样：

我将两个div都更改为

位置：relative

，并给底部一个

高度：100%

---

然后，设置#main

overflow:hidden
使用下面的标记和css

这是你的代码，下面是我的代码

​<div id="main">

    <header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p>
    </header>

    <footer>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p>
    </footer>

</div>

检查正在运行的代码。。。​
 你需要在你的网站的底部div吗？是的，我需要它，因为底部div是一个可滚动的区域。opacy:1.0对底部div有效（第二个示例）我添加了0.5的不透明度，只是为了表明它不起作用，底部div太大。然后我有一个问题，我不能使用底部div的滚动条它不起作用。底部div的“顶部”位置始终与顶部div的底部线具有相同的距离。您所说的相同距离是什么意思？？？要将页脚作为顶部浮动移动，您必须通过jquery进行计算，或者需要在两者之间添加一个div，当页眉浮动或更改高度时，该div将自动移动页脚。如果它适合你，我将使用javascript构建一个解决方案：底部div不是页脚，但顶部类似于页眉。底部的div必须填充父div的空白区域。我不想使用javascript。好的，在这里我了解到，总共有3个div，一个是父div，两个是子div，其中一个是header，或者可以在顶部（红色）显示，另一个在红色div下面，底部（绿色）。您希望顶部div的高度根据内容和宽度灵活，底部div（绿色）将在红色div结束后立即开始，这将填充父div的所有区域。如果情况是这样，则两者相同，但内容不同，如果不是这样，则仍需进一步了解。父div的大小应保持不变，我想使用底部div中的滚动条
​#main{
width:80%;
height:300px;
position:relative;
background:#ddd;    
}
header{
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
background:#aaa;    
}   
​footer{
width:100%;
height:auto;
position:absolute;    
bottom:0;
left:0;
background:#777;    
}