使用CSS使div垂直滚动


560

这个

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

提供了一个div用户可以水平和垂直滚动的功能。如何更改它以便div 可垂直滚动?


36
CSS3中有overflow-xoverflow-y,它们可以满足您的需求。
Marc B

Answers:


698

除了使用错误的属性之外,您还可以覆盖它。滚动条可与任何财产被触发overflowoverflow-x或者overflow-y每个人都可以被设置为任意的visiblehiddenscrollauto,或inherit。您当前正在查看以下两个:

  • auto-此值将查看盒子的宽度和高度。如果已定义它们,则不会使框扩展到这些边界之外。而是(如果内容超出了这些边界),它将为超出其长度的任意一个边界(或两个边界)创建一个滚动条。

  • scroll- 即使内容未超出边界设置,此值也将强制滚动条,无论如何。如果不需要滚动内容,则该栏将显示为“禁用”或非交互式。

如果您始终希望垂直滚动条出现:

您应该使用overflow-y: scroll。这力量滚动条显示为纵坐标它是否被需要。如果您实际上无法滚动上下文,它将显示为“禁用”滚动条。

如果您只希望滚动条出现,则可以滚动该框:

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


4
使用溢出:自动以某种方式在页面底部创建一个巨大的空白块。这是普遍现象吗?
11

268

尝试这样。

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


1
好的解决方案,但无论高度如何,滚动条始终可见
FindOutIslamNow

7
如果将overflow-y值设置为“ auto”,则在定义的高度之后滚动将可见。例如<div style =“ overflow-y:auto; height:200”>
Umair Gul

123

对于100%的视口高度,请使用:

overflow: auto;
max-height: 100vh;

52

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

另外,您还应该设置宽度。


13
为什么必须设置宽度?
LeeGee 2013年

1
@LeeGee您需要宽度来计算div的内容是否超出了div的范围,从而确定是否启用滚动。
罗伯托·博尼尼

宽度默认不是100%吗?
LeeGee '16

1
@LeeGee不,auto默认情况下。通常,这意味着父母的宽度的100%,但并非总是如此。
马达拉的幽灵

31

您可以改用此代码。

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


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

值:默认值。内容不会被裁剪,并且可能会在内容框外呈现。hidden:内容被剪切-不提供滚动机制。scroll:内容被剪切并提供滚动机制。auto:应为溢出的框提供滚动机制。initial:将此属性设置为其默认值。





继承从其父元素继承此属性。


15

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


9

对我来说,所有这些答案的问题是它们没有响应。我必须为父div设置一个固定高度,这是我所不希望的。我也不想花很多时间在媒体查询上。如果您使用的是Angular,则可以使用bootstraps选项卡,它将为您完成所有艰苦的工作。您将能够滚动内部内容,并且它将是响应性的。设置标签时,请按以下步骤操作:$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;}

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.