`overflow-y`

Question

我正在为我的HTML页面滚动问题寻找CSS / Javascript解决方案。

我有三个包含div，标题和包装div的div，

我需要在包装器div中使用垂直滚动条，高度应该是自动或100％基于内容。

标题应该是固定的，我不想要整体滚动条，所以我在body标签中给了overflow:hidden，

我需要在包装器div中使用垂直滚动条。我该如何解决这个问题？

HTML

<div id="container">

    <div class="header"></div>

    <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
        <!-- Lots more paragraphs-->
    </div>

</div>

CSS

body{ margin:0; padding:0; overflow:hidden; height:100%}
#container { width:1000px; margin:0 auto;}
.header { width:1000px; height:30px; background-color:#dadada;}
.wrapper{ width:1000px; overflow:scroll; position:relative;}

请参阅此JS Fiddle

Answer 1

您缺少height CSS属性。

添加它会发现滚动条会出现。

.wrapper{ 
    // width: 1000px;
    width:600px; 
    overflow-y:scroll; 
    position:relative;
    height: 300px;
}

JSFIDDLE

来自documentation：

`overflow-y`

overflow-y CSS属性指定当它在顶部和底部边缘溢出时是否剪辑内容，渲染滚动条或显示块级元素的溢出内容。

Answer 2

如果你在.wrapper课程中添加高度，那么滚动工作正常，而height滚动无法正常工作。

试试这个 http://jsfiddle.net/ZcrFr/3/

CSS：

.wrapper {
  position: relative;
  overflow: scroll;
  width: 1000px;
  height: 800px;
}

Answer 3

解决方案是将height:100%;添加到.wrapper-div的所有父元素中。所以：

html{
    height: 100%;
}

body{ 
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}

#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}

Answer 4

你没有给div一个高度。因此，当添加更多内容时，它会自动拉伸。给它一个固定高度，滚动条会出现。

Answer 5

我修改了你的：Fiddle

html, body{ margin:0; padding:0; overflow:hidden; height:100% }
.header { margin: 0 auto; width:500px; height:30px; background-color:#dadada;}
.wrapper{ margin: 0 auto; width:500px; overflow:scroll; height: 100%;}

为html-tag提供100％的高度是解决方案。我也删除了容器div。当您的布局保持不变时，您不需要它。

Answer 6

如果您为标头设置了静态高度，则可以在计算包装器尺寸时使用它。

http://jsfiddle.net/ske5Lqyv/5/

使用示例代码，您可以添加以下CSS：

location ~ \.php$ {
    [...]
    add_header "Access-Control-Allow-Origin"   * always;
    add_header "Access-Control-Allow-Methods"  "GET, POST, DELETE, PUT, OPTIONS, HEAD" always;
    add_header "Access-Control-Allow-Headers"  "DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Range, Authorization, Origin, Accept, Accept-Language" always;
    add_header "Access-Control-Expose-Headers" "Content-Length,Content-Range" always;
}

或者，您可以使用flexbox进行更动态的处理 http://jsfiddle.net/19zbs7je/3/

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  height: 100%;
}

.header {
  height: 64px;
  background-color: lightblue;
}

.wrapper {
  height: calc(100% - 64px);
  overflow-y: auto;
}

如果您想变得更鸽友，请看我对这个问题的回答 https://stackoverflow.com/a/52416148/1513083

Answer 7

我想对@Ionica Bizau发表评论，但我没有足够的声誉回答有关javascript代码的问题：
你需要做的是获取父元素的高度（减去任何占用空间的元素）并将其应用于子元素。

function wrapperHeight(){
    var height = $(window).outerHeight() - $('#header').outerHeight(true);
    $('.wrapper').css({"max-height":height+"px"});      
}

注意
窗口可以替换为＆＃34; .container＆＃34;如果那个没有浮动的孩子或有一个修复，以获得正确的高度计算。该解决方案使用jQuery。

Answer 8

对于Angular2 + Material2 + Sidenav，您需要执行以下操作：

 ngAfterViewInit() {
   this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; 
  }

Answer 9

尝试使用垂直滚动条：

overflow-y:scroll;

Answer 10

就我而言，只有height: 100vh可以解决预期行为的问题

Answer 11

这些所有解决方案都很好，但是如果您想添加垂直滚动并且不想更改 div 高度，那么您可以像这样使用 margin-top:40px; 将所有东西放在适当的位置，这样它就可以保持在容器并很好地滚动并根据您的要求更新 margin-top 值。

谢谢

溢出Scroll css在div中不起作用

11 个答案:

`overflow-y`