溢出滚动 css 在 div 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17295219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow Scroll css is not working in the div
提问by user2493730
I am looking for CSS/Javascript solution for my HTML page scrolling issue.
我正在为我的 HTML 页面滚动问题寻找 CSS/Javascript 解决方案。
I have three divs that contain a div, a header and a wrapper div,
我有三个包含一个 div、一个标题和一个包装 div 的 div，
I need a vertical scrollbar in the wrapper div, height should be auto or 100% based on the content.
我需要包装器 div 中的垂直滚动条，高度应为自动或 100% 基于内容。
The header should be fixed, and I don't want overall scrollbar so I have given overflow:hiddenin the body tag,
标题应该是固定的，我不想要整体滚动条，所以我overflow:hidden在正文标签中给出了，
I need vertical scrollbar in my wrapper div. How can I fix this?
我的包装 div 中需要垂直滚动条。我怎样才能解决这个问题？
HTML
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
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;}
Please refer to this JS Fiddle
请参考这个JS Fiddle
回答by Ionic? Biz?u
You are missing the heightCSS property.
您缺少heightCSS 属性。
Adding it you will notice that scroll bar will appear.
添加它你会注意到滚动条会出现。
.wrapper{
// width: 1000px;
width:600px;
overflow-y:scroll;
position:relative;
height: 300px;
}
From documentation:
从文档：
overflow-y
overflow-y
The overflow-y CSS property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.
overflow-y CSS 属性指定当块级元素在顶部和底部边缘溢出时是否剪切内容、渲染滚动条或显示溢出内容。
回答by johannes
The solution is to add height:100%;to all the the parent elements of your .wrapper-divas well. So:
解决方案是添加height:100%;到您的所有父元素中.wrapper-div。所以：
html{
height: 100%;
}
body{
margin:0;
padding:0;
overflow:hidden;
height:100%;
}
#container{
width:1000px;
margin:0 auto;
height:100%;
}
回答by Falguni Panchal
If you add height in .wrapperclass then your scroll is working, without heightscroll is not working.
如果您在.wrapper课堂上添加高度，那么您的滚动就可以正常工作，没有height滚动则无法正常工作。
Try this http://jsfiddle.net/ZcrFr/3/
试试这个 http://jsfiddle.net/ZcrFr/3/
CSS:
CSS：
.wrapper {
position: relative;
overflow: scroll;
width: 1000px;
height: 800px;
}
回答by LinkinTED
You didn't gave the div a height. So it will automatically stretch when more content is added. Give it a fix-height and the scroll bars will show up.
你没有给 div 一个高度。所以当添加更多内容时它会自动拉伸。给它一个固定高度，滚动条就会出现。
回答by AKrush95
If you set a static height for your header, you can use that in a calculation for the size of your wrapper.
如果您为标题设置了静态高度，则可以在计算包装器大小时使用它。
http://jsfiddle.net/ske5Lqyv/5/
http://jsfiddle.net/ske5Lqyv/5/
Using your example code, you can add this CSS:
使用您的示例代码，您可以添加以下 CSS：
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;
}
Or, you can use flexbox for a more dynamic approach http://jsfiddle.net/19zbs7je/3/
或者，您可以使用 flexbox 进行更动态的方法 http://jsfiddle.net/19zbs7je/3/
<div id="container">
<div class="section">
<div class="header">Heading</div>
<div class="wrapper">
<p>Large Text</p>
</div>
</div>
</div>
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
.section {
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.header {
height: 64px;
background-color: lightblue;
flex-shrink: 0;
}
.wrapper {
flex-grow: 1;
overflow: auto;
min-height: 100%;
}
And if you'd like to get even fancier, take a look at my response to this question https://stackoverflow.com/a/52416148/1513083
如果你想变得更狂热，看看我对这个问题的回答 https://stackoverflow.com/a/52416148/1513083
回答by LinkinTED
I edited your: 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%;}
Giving the html-tag a 100% height is the solution. I also deleted the container div. You don't need it when your layout stays like this.
给 html-tag 一个 100% 的高度是解决方案。我还删除了容器 div。当您的布局保持这样时，您不需要它。
回答by Helzgate
For Angular2 + Material2 + Sidenav, you'll need to do the following:
对于 Angular2 + Material2 + Sidenav，您需要执行以下操作：
ngAfterViewInit() {
this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden';
}
回答by Anima-t3d
I wanted to comment on @Ionica Bizau, but I don't have enough reputation.
To give a reply to your question about javascript code:
What you need to do is get the parent's element height (minus any elements that take up space) and apply that to the child elements.
我想评论@Ionica Bizau，但我没有足够的声誉。
回答您关于 javascript 代码的问题：
您需要做的是获取父元素的高度（减去任何占用空间的元素）并将其应用于子元素。
function wrapperHeight(){
var height = $(window).outerHeight() - $('#header').outerHeight(true);
$('.wrapper').css({"max-height":height+"px"});
}
Note
window could be replaced by ".container" if that one has no floated children or has a fix to get the correct height calculated. This solution uses jQuery.
Note
window 可以替换为“.container”，如果那个窗口没有浮动的孩子或者有一个修复程序来计算正确的高度。此解决方案使用 jQuery。
回答by Marc Lloyd
Try this for a vertical scrollbar:
试试这个垂直滚动条：
overflow-y:scroll;
回答by itzhar
in my case, only height: 100vhfix the problem with the expected behavior
就我而言，只height: 100vh解决预期行为的问题
