我正在寻找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; }
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.