溢出滚动css在div中不工作

前端之家收集整理的这篇文章主要介绍了溢出滚动css在div中不工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找CSS / Javascript解决方案为我的HTML页面滚动问题。

我有三个div,其中包含一个div,一个头和一个封装div,

我需要一个垂直滚动条在封装div,高度应该是自动或基于内容的100%。

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

我需要垂直滚动条在我的包装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

解决方法

您缺少高度CSS属性

添加它,你会注意到,滚动条将出现。

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

JSFIDDLE

documentation

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.

猜你在找的CSS相关文章