Question

我有一个绝对的位置div，它与容器背景重叠，因为它有更大的高度。这个div正在与一个快乐地坐在它左边的身体div共享容器。

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

或者我应该将divs并排浮动并在两者的底部放一个<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次我通过基于浮动的布局获得更好的结果。但如果没有更多信息，我真的不能说更多。

CSS绝对位置元素扩展背景

1 个答案: