1

我有一个侧边栏，出于几个原因，我将其绝对定位在右侧。但问题是，如果我的主要内容区域较短，则侧边栏会超出内容。

有没有办法使用 CSS 让容器将其高度包裹在侧边栏周围（如果侧边栏更长）？

请这个jsFiddle：http: //jsfiddle.net/52jjp/

4

3 回答 3

2

遗憾的是，没有办法在直接的 CSS 中做到这一点。当您绝对定位某些东西时，您会将其从文档流中删除，因此它不再影响父级的高度。

正如@scott-brown 已经建议的那样，您可以使用 javascript 解决它。

但是，我更喜欢全 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 （更多细节在这里）。

这种布局技术的好处是您可以在不更改标记的情况下交换.primary和列，只需更改为，反之亦然。.sidebarfloat:leftfloat:right

clearfix 还意味着父元素将包含子元素，因此您可以根据需要设置背景颜色.page，并且它将一直延伸到更长的列的底部。

于 2012-07-18T17:05:31.940 回答
1

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

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

于 2012-07-18T16:27:40.130 回答
1

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

于 2012-07-18T16:41:34.377 回答