在我的页面中,我有一个基于其父级的高度为100%的元素;但是,我希望这个元素在必要时自动垂直滚动。这是my example。
我做不到。
我添加了以下css:
height:100%;
max-height:100%;
事实上,我想要的是确保.content
始终在.container
内。像这样:
(顺便说一句,在上图中,我使用max-height:400px
应该避免,因为它的最大高度应该基于.container
的高度
有什么想法吗?
答案 0 :(得分:1)
这与您正在寻找的解决方案很接近,但您可能需要调整填充等,以获得更美观的外观:http://jsfiddle.net/GJ5yM/
新CSS:
.content{
height:100%;
position: absolute;
}
.windowcontent{
background-color: white;
padding: 10px;
max-height:100%;
position:relative;
overflow-y:auto;
}
答案 1 :(得分:0)
看看这个小提琴。 http://jsfiddle.net/siyakunde/qng67/1/ 这是你想要的吗?
我已经给出了
max-height:100%;
overflow:scroll;
到内容。
答案 2 :(得分:0)
希望这就是你要找的东西:
CSS:
#scrollFrameWrap {
width: 400px;
margin: 20px auto;
background: #000;
border-radius: 8px;
box-shadow: 0px 1px 15px 0 #fff inset;
padding: 3px 10px 10px;
}
.title {
text-align: center;
font-size: 12px;
color: #aaa;
}
#parentElement {
height: 150px;
padding-bottom: 10px;
margin-bottom:10px;
}
#scrollFrame {
width: 380px;
height: 100%;
overflow: scroll;
overflow-x: hidden;
background: #fff;
border-radius: 4px;
padding: 10px;
}
HTML:
<div id="scrollFrameWrap">
<p class="title">Title</p>
<div id="parentElement">
<div id="scrollFrame">
<p>This is a sentence, hope you like it.</p>
<p>This is a sentence, hope you like it.</p>
<p>This is a sentence, hope you like it.</p>
<p>This is a sentence, hope you like it.</p>
<p>This is a sentence, hope you like it.</p>
<p>This is a sentence, hope you like it.</p>
<p>This is a sentence, hope you like it.</p>
<p>This is a sentence, hope you like it.</p>
<p>This is a sentence, hope you like it.</p>
<p>This is a sentence, hope you like it.</p>
</div>
</div>
</div>
看看是否有帮助
答案 3 :(得分:0)
仅设置
overflow-y: scroll;
并设置任何你想要的高度。