0

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

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

或者我应该只是将 div 并排浮动，然后将 a 夹<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背景在它们下方重复

4

1 回答 1

2

使用此布局：

<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 次使用基于浮动的布局可以获得更好的结果。但如果没有更多信息，我真的不能说更多。

于 2009-10-30T03:30:02.193 回答