设置溢出:auto高度100%

时间:2013-01-09 05:43:36

标签: css

在我的页面中,我有一个基于其父级的高度为100%的元素;但是,我希望这个元素在必要时自动垂直滚动。这是my example

我做不到。

我添加了以下css:

height:100%;
max-height:100%;

事实上,我想要的是确保.content始终在.container内。像这样:

pic.

(顺便说一句,在上图中,我使用max-height:400px应该避免,因为它的最大高度应该基于.container的高度

有什么想法吗?

4 个答案:

答案 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)

希望这就是你要找的东西:

http://jsfiddle.net/CjV6k/1/

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;

并设置任何你想要的高度。