9

如何让这个内部内容 div 的宽度等于可滚动区域的宽度？

<div class="scrollable">
    <div class="content">short</div>
    <div class="content">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>

使用 CSS：

.scrollable {
    width: 300px;
    height: 300px;
    overflow: auto;
}

.content {
    background-color: lightblue;
    white-space: nowrap;
}

jsFiddle：http: //jsfiddle.net/XBVsR/12/

问题：如果您滚动浏览，您会看到背景并没有按照应有的方式一直穿过。

我试过设置宽度：100%，溢出：可见等，但无济于事。

编辑：我已经更新以明确表示我不希望文本换行 - 我希望整个内容都水平滚动。

4

5 回答 5

11

您可以display: table-row;用于嵌套 div。看着jsfiddle

于 2013-07-01T13:53:53.880 回答
0

添加到 .content 类

overflow: auto;

在这里更新小提琴：http: //jsfiddle.net/XBVsR/11/

请记住，这将影响所有具有类 .content 的元素。你可能也想给它另一个类名。

于 2013-07-01T13:51:02.230 回答
0

把这个给你的内容

 overflow: auto;
于 2013-07-01T13:51:56.043 回答
0

如果要将外部 div 设置为宽度 300px，则不能。这是打破边界框的完整文本。但是，您可以通过将其添加到内容 CSS 来包装单词：

word-wrap: break-word;

但是，如果 300px 对您来说无关紧要，您可以将 overflow: auto 从可滚动类移动到内容类，这也应该可以解决背景问题。

于 2013-07-01T13:54:22.530 回答
0

解决方案是使用两个嵌套的 inner divs 而不是一个 inner div。

最外面的嵌套div应该有display: table并且也应该有min-width: 100%;and min-height: 100%;，而最里面的嵌套div应该有display: table-cell。

这样，如果表格单元格的内容太小，表格将以两种方式（水平和垂直）拉伸到外部可滚动容器的视口，但如果内容足够大，则会进一步拉伸。

它还允许padding在最里面的 div 上设置 s。

.outer {
  width: 200px;
  height: 100px;
  overflow: auto;
}

.middle {
  background: lightpink;
  display: table;
  min-width: 100%;
  min-height: 100%;
}

.inner {
  display: table-cell;
  white-space: pre-line;
  padding: 10px;
}
<div class="outer">
  <div class="middle">
    <div class="inner">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
and another one text
and another one text
and another one text
and another one text
and another one text
and another one text
    </div>
  </div>
</div>

<hr>

<div class="outer">
  <div class="middle">
    <div class="inner">short
    short
    short
    short
    short
    short
    short
    short
    </div>
  </div>
</div>

<hr>

<div class="outer">
  <div class="middle">
    <div class="inner">short</div>
  </div>
</div>

https://jsfiddle.net/4cuzqo06/

于 2019-10-10T17:46:28.867 回答