本文翻译自：Making a div vertically scrollable using CSS
This这个
<div id="" style="overflow:scroll; height:400px;">
gives adivthat the user can scroll in both in horizontally and vertically.给出一个div，用户可以在水平和垂直方向上滚动。How do I change it so that the div isonlyscrollable vertically?如何更改它以使div只能垂直滚动？
#1楼
参考：/question/ejKv/使用CSS使div可垂直滚动
#2楼
You can use this code instead.您可以使用此代码。
<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">
overflow-x: The overflow-x property specifies what to do with the left/right edges of the content - if it overflows the element's content area.overflow-x：overflow-x属性指定如何处理内容的左/右边缘 - 如果它溢出元素的内容区域。
overflow-y: The overflow-y property specifies what to do with the top/bottom edges of the content - if it overflows the element's content area.overflow-y：overflow-y属性指定如何处理内容的顶部/底部边缘 - 如果它溢出元素的内容区域。
Values值
visible: Default value.可见：默认值。The content is not clipped, and it may be rendered outside the content box.内容未被剪裁，并且可以在内容框之外呈现。
hidden: The content is clipped - and no scrolling mechanism is provided.隐藏：内容被剪切 - 并且没有提供滚动机制。
scroll: The content is clipped and a scrolling mechanism is provided.scroll：剪辑内容并提供滚动机制。
auto: Should cause a scrolling mechanism to be provided for overflowing boxes.auto：应该为溢出的框提供滚动机制。
initial: Sets this property to its default value.initial：将此属性设置为其默认值。
inheritInherits this property from its parent element.inherit从其父元素继承此属性。
#3楼
The problem with all of these answers for me was they weren't responsive.对我来说，所有这些答案的问题是他们没有回应。I had to have a fixed height for a parent div which i didn't want.我必须有一个我不想要的父div的固定高度。I also didn't want to spend a ton of time dinking around with media queries.我也不想花大量时间来处理媒体查询。If you are using angular, you can use bootstraps tabset and it will do all of the hard work for you.如果您正在使用angular，您可以使用bootstraps tabset，它将为您完成所有艰苦的工作。You'll be able to scroll the inner content and it will be responsive.您将能够滚动内部内容，它将是响应式的。When you setup the tab, do it like this:$scope.tab = { title: '', url: '', theclass: '', ative: true };设置选项卡时，请执行以下操作：$scope.tab = { title: '', url: '', theclass: '', ative: true };... the point is, you don't want a title or image icon.......重点是，你不需要标题或图像图标。then hide the outline of the tab in cs like this:然后在cs中隐藏选项卡的轮廓，如下所示：
.nav-tabs {border-bottom:none; }
and also this.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}and finally to remove the invisible tab that you can still click on if you don't implement this:.nav > li > a {padding:0px;margin:0px;}还有这个.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}最后删除如果你没有实现这个，你仍然可以点击隐形标签：.nav > li > a {padding:0px;margin:0px;}
#4楼
For 100% viewport height use:对于100％视口高度使用：
overflow: auto;max-height: 100vh;
#5楼
You can useoverflow-y: scrollfor vertical scrolling.您可以使用overflow-y: scroll进行垂直滚动。
<div style="overflow-y:scroll; height:400px; background:gray"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
#6楼
试试这样吧。
<div style="overflow-y: scroll; height:400px;">
