CSS 绝对位置元素扩展背景

Question

我有一个绝对位置的 div，它与容器背景重叠，因为它具有更大的高度。此 div 与一个在其左侧愉快地坐着的 body div 共享容器。

有没有办法将容器扩展为绝对定位的 div 的高度，而不是正文内容？

或者我应该只是将 div 并排浮动并在两者的底部放置一个<div style="clear: both"></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; }

您说您希望背景图片显示在内容下方。从这里我假设你的意思是你希望页面是全屏高度（最小）。

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

绝对定位有它的位置，但 10 次中有 9 次使用基于浮动的布局可以获得更好的结果。但是如果没有更多信息，我真的不能说更多。