Question

父元素具有固定宽度，overflow：auto用于显示滚动条。父内部有几个子元素，其他元素具有更宽的内容，但我需要扩展所有元素的宽度以填充父元素。例如，一个div需要展开，因为它具有背景颜色，当用户滚动父div时，背景颜色会被限制在初始视口的宽度。

这是jsfiddle来说明示例。 https://jsfiddle.net/jpsvwdm3/

HTML：

<div class="parent">
  <div class="child">
    child
  </div>
  <div class="long_child">
    long child
  </div>
</div>

CSS：

.parent {
  width: 300px;
  overflow: auto;
  padding: 10px;
  background: #bbb;
}
.child {
  background: lightyellow;
  padding: 5px;
}
.long_child {
  width: 500px;
  background: wheat;
  padding: 5px;
}

Answer 1

如果你不在乎使用jQuery，这里可能是一个解决方案：

http://jsfiddle.net/Lqwqf159/1/ 1

var maxWidth = 0;
$('.parent div').each(function () {
  maxWidth = ($(this).width() > maxWidth) ? $(this).width() : maxWidth;
});
$('.parent div').each(function () {
  $(this).width(maxWidth);
});

使用滚动将所有子元素扩展为div中的最大可用宽度

1 个答案: