本文介绍了将可滚动元素上的内部div的宽度设置为可滚动宽度的100%的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何使此内部内容div的宽度等于可滚动区域的宽度?

How do I get the width of this inner content div to be equal to the width of the scrollable area?

<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:

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

问题:

我已经尝试设置宽度:100%,overflow:visible,如果你滚动,你可以看到背景不会一路穿过,因为它应该。

I've tried setting width: 100%, overflow: visible, etc, to no avail.

编辑:我已更新,明确表示我不想让文字换行

I've updated to make clear that I don't want the text to wrap - I want the horizontal scroll on the whole thing.

推荐答案

您可以使用 display:table-row; code>用于嵌套div。查看

You can use display: table-row; for nested divs. Look at jsfiddle

这篇关于将可滚动元素上的内部div的宽度设置为可滚动宽度的100%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-19 19:39