CSS绝对位置元素延伸背景

Question

我有一个绝对位置 div，它与容器背景重叠，因为它具有较大的高度。该 div 与位于其左侧的 body div 共享容器。

有没有办法将容器扩展到绝对定位的 div 的高度，而不是主体内容的高度？

或者我应该并排浮动 div 并在两者的底部放置一个

？似乎是一个让容器扩展的混乱黑客：/

编辑：评论似乎不喜欢代码结构。所以我也将其编辑到这里。

布局是：

<div id="content">
   <div class="container">
      <div id="header"></div>
      <div id="main">
         <div id="column-1"></div>
         <div id="column-2"></div>
      </div>
   </div>
</div>

#content有重复的背景，#container设置页面的固定宽度。 #header 存放链接，#main 存放包含页面主要内容的两列。我无法让这两列彼此相邻（浮动/绝对），同时让 #content's 背景在它们下方重复

Answer 1

使用此布局：

<div id="content">
  <div class="container">
    <div id="header"></div>
    <div id="main">
      <div id="column-1"></div>
      <div id="column-2"></div>
    </div>
  </div>
</div>

您的基本 CSS 应该类似于：

html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }

您说您希望背景图像出现在内容下方。由此我假设您的意思是您希望页面为全屏高度（最小值）。

绝对定位的要点在于，它从正常流中删除了元素，因此您不能让它的“容器”扩展以包含它，因为从技术上讲它没有容器。

绝对定位有其一席之地，但十分之九的情况是我使用基于浮动的布局获得了更好的结果。但如果没有更多信息，我真的无法说更多。