使用CSS使div可垂直滚动

Question

这个

<div id="" style="overflow:scroll; height:400px;">

给出一个div用户可以水平和垂直滚动.如何更改它以使div 只能垂直滚动？

Answer 1

除了使用错误的属性之外,您还可以使用它.滚动条可与任何财产被触发overflow,overflow-x或者overflow-y每个人都可以被设置为任意的visible,hidden,scroll,auto,或inherit.您目前正在研究这两个:

• auto - 此值将查看框的宽度和高度.如果它们被定义,它将不会让框扩展超过这些边界.相反(如果内容超过这些边界),它将为超出其长度的边界(或两者)创建滚动条.

• scroll- 即使内容未超出边界集,此值也会强制滚动条,无论如何.如果不需要滚动内容,则栏将显示为"已禁用"或非交互式.

如果您始终希望显示垂直滚动条:

你应该用overflow-y: scroll.这会强制滚动条显示为垂直轴,无论是否需要它.如果您无法实际滚动上下文,它将显示为"已禁用"滚动条.

如果您只想滚动框,则只需要显示滚动条:

只是用overflow: auto.由于默认情况下,当内容无法适应当前行时,您的内容会突破到下一行,因此不会创建水平滚动条(除非它位于禁用自动换行的元素上).对于垂直条,它将允许内容扩展到您指定的高度.如果超过该高度,它将显示垂直滚动条以查看其余内容,但如果不超过高度则不会显示滚动条.

Answer 2

试试这样吧.

<div style="overflow-y: scroll; height:400px;">

Answer 3

对于100%视口高度使用:

overflow: auto;
max-height: 100vh;

Answer 4

overflow-y: auto;在div上使用.

此外,您还应该设置宽度.

Answer 5

您可以使用此代码.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x:overflow-x属性指定如何处理内容的左/右边缘 - 如果它溢出元素的内容区域.
overflow-y:overflow-y属性指定如何处理内容的顶部/底部边缘 - 如果它溢出元素的内容区域.

值
可见:默认值.内容未被剪裁,并且可以在内容框之外呈现.
隐藏:内容被剪切 - 并且没有提供滚动机制.
scroll:剪辑内容并提供滚动机制.
auto:应该为溢出的框提供滚动机制.
initial:将此属性设置为其默认值.
inherit从其父元素继承此属性.

Answer 6

您可以使用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>

Answer 7

对我来说,所有这些答案的问题是他们没有回应.我必须有一个我不想要的父div的固定高度.我也不想花大量时间来处理媒体查询.如果您正在使用angular,您可以使用bootstraps tabset,它将为您完成所有艰苦的工作.您将能够滚动内部内容,它将是响应式的.设置选项卡时,请执行以下操作:$scope.tab = { title: '', url: '', theclass: '', ative: true };...重点是,您不需要标题或图像图标.然后在cs中隐藏选项卡的轮廓,如下所示:

.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;}