css - オーバーフローを設定します: 高さ 100% の自動

Question

私のページには、親に基づいて 100% の高さを持つ要素があります。ただし、必要に応じて、この要素を垂直方向に自動スクロールしたいと考えています。これは私の例です。

私はそれを作ることができません。

以下のcssを追加しました。

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

実際、私が望むのは、.contentが常に の中にあることを確認すること.containerです。このような：

(ところで、上記の画像ではmax-height:400px、最大の高さは の高さに基づく必要があるため、避ける必要がある を使用しています.container)

何か案は？

Answer 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;
    }

Answer 2

このフィドルをチェックしてください。http://jsfiddle.net/siyakunde/qng67/1/ これはあなたが望むものですか??

私は与えました

max-height:100%;
overflow:scroll;

コンテンツへ。

Answer 3

これがあなたが探しているものであることを願っています:

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>

それが役立つかどうかを確認してください

Answer 4

セットのみ

 overflow-y: scroll;

高さを好きなように設定します。