Question

我有一个侧边栏，我已经完全定位在右侧，原因有几个。但问题是，如果我的主要内容区域较短，则侧边栏会延伸到内容之外。

CSS是否有办法让容器围绕侧边栏包裹它的高度（如果侧边栏更长）？

Answer 1

遗憾的是，没有办法在直接的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上设置背景颜色，并且它将一直延伸到任何列更长的底部。< / p>

Answer 2

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

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

Answer 3

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

制作绝对定位的元素填充其容器的宽度

3 个答案: