水平可滚动容器内的垂直可滚动div

问题描述

请看图片，请：

我有一个容器，它有许多可水平滚动的（红线）&它工作正常。问题是.items-wrapper divs应该是可垂直滚动的（绿线），但我不能提出解决方案，也不能发布代码，这非常巨大。我试过使用溢出，但它没有奏效。

你有没有类似的问题&你能帮我吗？

解决方案

您必须设置 overflow-x ， overflow-y 属性值为 auto 。

html，body {width：100％;身高：100％; margin：0;}＃container {width：100％;身高：100％;背景：蓝色;溢出-x：auto; white-space：nowrap;}。inner {display：inline-block;宽度：200px;身高：158px; margin：10px;溢出-y：auto;背景：橙色; < div id = html -print -print 容器 > < div class =inner> Lorem ipsum dolor sit amet，consectetuer adipiscing elit，sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。如果你想让你的工作变得轻松愉快，那么你的工作就会变得非常简单。 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat，vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nura facilisi。 Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum。 Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem。< / div> < div class =inner> Lorem ipsum dolor sit amet，consectetuer adipiscing elit，sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。如果你想让你的工作变得轻松愉快，那么你的工作就会变得非常简单。 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat，vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nura facilisi。 Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum。 Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem。< / div> < div class =inner> Lorem ipsum dolor sit amet，consectetuer adipiscing elit，sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。如果你想让你的工作变得轻松愉快，那么你的工作就会变得非常简单。 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat，vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nura facilisi。 Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum。 Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem。< / div> < div class =inner> Lorem ipsum dolor sit amet，consectetuer adipiscing elit，sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。如果你想让你的工作变得轻松愉快，那么你的工作就会变得非常简单。 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat，vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nura facilisi。 Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum。 Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem。< / div> < div class =inner> Lorem ipsum dolor sit amet，consectetuer adipiscing elit，sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。如果你想让你的工作变得轻松愉快，那么你的工作就会变得非常简单。 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat，vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nura facilisi。 Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum。 Typi non habent claritatem insitam; < / div>< / div>

Take a look at the picture, please:

I have a container which has many .items-wrapper elements that is horizontally scrollable (red line) & it works fine. The problem is that .items-wrapper divs should be vertically scrollable (green line), but I cannot come out with a solution nor post the code, which is really huge. I tried using overflows, but it didn't worked.

Did you have similar problem & can you help me, please?

解决方案

You have to set overflow-x, overflow-y property value to auto.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#container {
  width: 100%;
  height: 100%;
  background: blue;
  overflow-x: auto;
  white-space: nowrap;
}
.inner {
  display: inline-block;
  width: 200px;
  height: 158px;
  margin: 10px;
  overflow-y: auto;
  background: orange;
  white-space: normal;
}

<div id="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>
  <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>
  <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>
  <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>
  <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>
</div>

这篇关于水平可滚动容器内的垂直可滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！