代码之家 › 专栏 › 技术社区 › Harvey Fletcher

“overflow-x:scroll”不起作用的百分比宽度<div>,即使在范围内

css html javascript

Harvey Fletcher · 技术社区 · 6 年前

在我的代码中,我有一个div,它位于另一个div中,占页面的50%

<div id="mainContainer" class="mainContainer">
    <div id="scroller" class="scrolling">
        <!-- items here should make the div really long -->
    </div>
</div>

我的类配置如下:

div.mainContainer{
    width:  50%;
    height: 50%;
}

div.scrolling{
    width:  50%;
    height: 10%;
    overflow-x: scroll;
}

也就是说,当 scroller div,出现一个滚动条,它可以左右滚动。但是,我发现项目被推到下一行,div垂直滚动。

滚动div包含 <div> 而不是 <p> 或者其他文字,我已经测试过 <分区> 内的标记在其他位置,它们都显示在同一行上。是的。

在做了一些研究之后,据我所知,你不能 overflow: scroll 在具有%宽度的div上。所以我试着把 <分区> 在一个 <span> 宽度为100%,但这不起作用。

我还尝试使用javascript测量宽度并将其设置为“px”量,但没有效果。

另外,我改变了 width 到 max-width -没有效果。

如何使这个div水平滚动?

3 回复 | 直到 6 年前

D Lowther 6 年前

我想你不想强迫你这样做。添加边框以清晰显示大小

div.mainContainer{
    width:  50%;
    height: 50%;
    border: 1px solid;
}

div.scrolling{
    width:  50%;
    height: 10%;
    overflow-x: scroll;
    border: 1px solid;
    white-space: nowrap;
}

<div id="mainContainer" class="mainContainer">
    <div id="scroller" class="scrolling">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

Cristian 6 年前

我举了个例子。你怎么能看到有一个水平滚动的p。也可以放置其他元素。编辑我把另一个元素加上文本和图像,你怎么看,它是可滚动的

div.mainContainer{
    width:  100%;
    height: 100%;
}

div.scrolling{
    max-width:  50%;
    height: 10%;
   overflow: auto;
}
p.text{
	white-space: nowrap;
 overflow: auto;
}

#scroller>div{
	overflow: auto;
  border: 6px solid red;
	white-space: nowrap;
  overflow: auto;
}

<div id="mainContainer" class="mainContainer">
    <div id="scroller" class="scrolling">
        <p class="text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi nec diam convallis lacinia. Suspendisse feugiat tincidunt felis, eleifend finibus odio sodales tempor. Donec tempor diam sem, ac hendrerit orci ullamcorper quis. Ut tempus nec nunc at bibendum. Nulla vulputate nisl sit amet dapibus scelerisque. Nulla facilisi. Nam bibendum nec felis quis lobortis. Sed porta convallis sapien, ac fringilla quam maximus efficitur. Sed et mi ut lorem iaculis consectetur et et dui. Cras sit amet mi non augue viverra facilisis. Aenean pretium cursus consequat. Quisque cursus fringilla facilisis. Donec vel eros tellus. Nunc non nibh nibh. Sed pretium laoreet lectus eget blandit.
				</p>
				<div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi nec diam convallis lacinia. Suspendisse feugiat tincidunt felis, eleifend finibus odio sodales tempor. Donec tempor diam sem, ac hendrerit orci ullamcorper quis. Ut tempus nec nunc at bibendum. Nulla vulputate nisl sit amet dapibus scelerisque. Nulla facilisi. Nam bibendum nec felis quis lobortis. Sed porta convallis sapien, ac fringilla quam maximus efficitur. Sed et mi ut lorem iaculis consectetur et et dui. Cras sit amet mi non augue viverra facilisis. Aenean pretium cursus consequat. Quisque cursus fringilla facilisis. Donec vel eros tellus. Nunc non nibh nibh. Sed pretium laoreet lectus eget blandit.<br>
				<img src="https://cdn.vox-cdn.com/thumbor/SOE2_mCo4BiW9ENumqhU220AEMk=/0x330:1577x1381/1200x800/filters:focal(0x330:1577x1381)/cdn.vox-cdn.com/uploads/chorus_image/image/33197419/122047293.0.jpg">
				</div>
    </div>
</div>

Maytha8 6 年前

您可以使用 vw (视区宽度)设置宽度时。下面是一个例子:

body {margin: 0;}
div {
    width: 100vw;
    height: 30px;
    background-color: red;
}

<div></div>