使一个绝对定位的元素填充它的容器的宽度

Question

我有一个侧栏，我已经绝对地定位到几个理由。但问题是，如果我有一个较短的主要内容区域，侧栏会超出内容。

有没有办法用CSS，我们可以让容器将其高度包围在边栏上（如果边栏更长）？

请本的jsfiddle：http://jsfiddle.net/52jjp/

Answer 1

这是不容易的 '清晰的' 绝对定位的元素。我发现这样做的一个方法是在jQuery中获取高度，然后将该高度应用于容器。例如：

$('#container').height($('#ab_positioned').height());

Answer 2

您可以设置min-height{...}到.main-content或.pad，如果侧边栏有一个固定的高度。

Answer 3

不幸的是，没有办法在直接CSS中做到这一点。当你绝对放置某物时，将其从文档流中移除，因此它不再影响父级的高度。

你可以用javascript解决它，因为@ scott-brown已经建议。

但是，我更喜欢所有的CSS解决方案。你可以使用清除，无论哪一方不再使用该标记的浮动侧边栏布局：

<div class="page"> 
    <div class="content"> 
    Primary content here. 
    </div> 
    <div class="sidebar"> 
    Sidebar content here. 
    </div> 
</div> 

这个CSS：

.primary { 
    float: left; 
    width: 66%; 
} 
.sidebar { 
    float: right; 
    width: 33%; 
} 
.page:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    zoom: 1; 
} 

上.page的风格被称为clearfix（more details here）。

这个布局技术的好处是，你可以交换.primary和.sidebar列不改变的标记，只是通过改变float:left至float:right，反之亦然。

clearfix还意味着父元素将包含子元素，所以如果需要，您可以在.page上设置背景颜色，并且它将一直延伸到任何较长列的底部。