Question

我面临CSS的布局问题，我无法将元素属性设置为最大可滚动宽度。在我的情况下，我有一个相对大小的div（在实际代码中，它应该是响应）在里面显示文本。目标是为某些行设置背景颜色，以便强调差异。

＆＃13;

#wrapper {
  width: 25%;
  overflow-x: scroll;
}
span {
  white-space: pre;
  /* required */
  font-family: monospace;
  /* required */
  display: block;
  /* required to make width effective */
  width: 100%;
}
.green {
  background-color: #7f7;
}

＆＃13;

<div id="wrapper">
  <span class="green">   That's an add ! Scroll me...
    </span>
  <span>Lorem ipsum dolor sit amet blablablablablablabl
    </span>
</div>

＆＃13;

Here is a JSFiddle我做了说明。

我无法将背景颜色设置为块的末尾，这意味着如果有人滚动，他将看不到颜色。

在Stackoverflow上有几个类似的问题，许多人建议使用min-width值（即background css 100% width horizontal scroll issue）。如果内容未达到min-width值，那就不太好了。

如果有正确的解决方法，我会很高兴听到它！

Answer 1

使用vw (100% viewport width)将容器拉伸到视口的末尾。您还需要将display更改为table-header-group:

span {
  white-space: pre;  /* required */
  font-family: monospace;  /* required */
  display: table-header-group;  /* required to make width effective */
  width: 100vw; /*100% of viewport width*/
}

vh（视口高度）也可用于需要将容器拉伸到视口高度的100％的情况。

希望它有所帮助。

将元素宽度设置为100％可滚动宽度

1 个答案: