溢出滚动CSS不工作在div
我正在为我的HTML页面滚动问题寻找CSS / Javascript解决scheme。
我有三个div包含一个div，一个头文件和一个包装div，
我需要在包装div垂直滚动条，高度应该是自动或100％的内容的基础上。
头部应该是固定的，我不想整体滚动条，所以我给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小提琴
你错过了CSS属性的height 。
添加它你会注意到滚动条会出现。
.wrapper{ // width: 1000px; width:600px; overflow-y:scroll; position:relative; height: 300px; }
的jsfiddle
从文档 ：
overflow-y
overflow-y CSS属性指定当顶部和底部边缘溢出时，是否剪裁内容，呈现滚动条或显示块级元素的溢出内容。
如果您在.wrapper类中添加高度，那么您的滚动工作，没有height滚动不起作用。
试试这个http://jsfiddle.net/ZcrFr/3/
CSS：
.wrapper { position: relative; overflow: scroll; width: 1000px; height: 800px; }
我编辑了你的小提琴
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标签100％的高度是解决scheme。 我也删除了容器div。 当你的布局保持这样的状态时，你不需要它。
你没有给这个div一个高度。 所以当添加更多内容时它会自动延伸。 给它一个固定的高度，滚动条会出现。
试试这个垂直滚动条：
overflow-y:scroll;
我想评论@ Ionica Bizau，但我没有足够的声望。
给你一个关于javascript代码的问题的回复：
你需要做的是获得父母的元素高度（减去任何占用空间的元素）并将其应用到子元素。
function wrapperHeight(){ var height = $(window).outerHeight() - $('#header').outerHeight(true); $('.wrapper').css({"max-height":height+"px"}); }
注意
窗口可以replace为“。容器”，如果那个没有浮动的孩子或有一个修正，以获得正确的高度计算。 这个解决scheme使用jQuery。
解决方法是增加高度：100％; 到你的.wrapper-div的所有父元素。 所以：
html{ heigth: 100%; } body{ margin:0; padding:0; overflow:hidden; height:100%; } #container{ width:1000px; margin:0 auto; height:100%; }
对于Angular2 + Material2 + Sidenav，您需要执行以下操作：
ngAfterViewInit() { this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; }
