使用CSS垂直滚动div
这个
<div id="" style="overflow:scroll; height:400px;"> 给出一个div ，用户可以在水平和垂直方向上滚动。 如何更改它，使div 只能垂直滚动？
你已经把它用在了使用错误的财产。 滚动条可以用任何属性overflow ， overflow-x或overflow-y触发，每个可以设置为visible ， hidden ， scroll ， auto或inherit 。 你正在看这两个：
-
auto– 此值将查看框的宽度和高度。 如果他们被定义，它不会让框扩展到这些边界。 相反（如果内容超出了这些边界），它将创build一个超出其长度的边界（或两者）的滚动条。 -
scroll– 即使内容不超过边界集，该值强制滚动条，无论如何。 如果内容不需要滚动，该栏将显示为“禁用”或非交互式。
如果您始终想要显示垂直滚动条：
你应该使用overflow-y: scroll 。 这会迫使一个滚动条出现在垂直轴上，无论是否需要。 如果实际上不能滚动上下文，它将显示为“禁用”滚动条。
如果您只想滚动条出现如果您可以滚动框：
只需使用overflow: auto 。 由于默认情况下，当你的内容不能放在当前行上时，它会被切换到下一行，所以不会创build一个水平滚动条（除非它是在禁用了封闭字符的元素上）。 对于垂直条，它将允许内容扩展到您指定的高度。 如果超过该高度，将显示一个垂直滚动条来查看其余内容，但是如果滚动条没有超过高度，则不会显示滚动条。
像这样尝试。
<div id="" style="overflow-y: scroll; height:400px;">
对于100％视口高度使用：
overflow: auto; max-height: 100vh;
使用overflow-y: auto; 在div上。
另外，你也应该设置宽度。
您可以改用这个代码。
<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">
overflow-x ：overflow-x属性指定如何处理内容的左/右边缘 – 如果它溢出元素的内容区域。
overflow-y ：overflow-y属性指定如何处理内容的顶部/底部边缘 – 如果它溢出元素的内容区域。
值
可见 ：默认值。 内容不会被剪切，并且可能会在内容框外呈现。
隐藏 ：剪辑的内容 – 没有提供滚动机制。
滚动 ：剪裁内容并提供滚动机制。
自动 ：应该为溢出的盒子提供滚动机制。
initial ：将此属性设置为其默认值。
inheritance从其父元素inheritance此属性。
所有这些答案的问题是他们没有反应。 我不得不有一个固定的高度父母的div，我不想要的。 我也不想花大量的时间与媒体查询。 如果你正在使用angular，你可以使用bootstraps tabset，它会为你做所有的辛苦工作。 你将能够滚动内部的内容，它将是响应。 当你设置选项卡，像这样做： $scope.tab = { title: '', url: '', theclass: '', ative: true }; …重点是，你不想要一个标题或图像的图标。 然后在cs中隐藏标签的轮廓，如下所示： .nav-tabs { border-bottom:none; } .nav-tabs { border-bottom:none; }以及.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;}
您可以使用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>
