0

現在、ページの下部に固定されるフッター要素を作成しています。

  <div id='footer'>
    <div id='chat'> 
      <input class='input-medium' type='text' placeholder="Say something..."/>
      <button class='btn'>Send</button>
    </div>

    <div id='logs'>
       <!-- There will be a lot of logs here and it will be scrollable-y --> 
    </div>
  </div>

この要素を、ユーザーが好きな高さに (垂直方向に) サイズ変更できるように構成したいと考えています。フッター要素のサイズを変更すると #logs のサイズが変更されるようにサイズ変更を行います。

次のようにフッターの高さを簡単に設定できるように、CSS をどのように構成すればよいでしょうか。

  • #chat は最初にスペースを埋めます。
  • #logs は、残っているスペースを埋めます。オーバーフローが発生した場合、#logs はオーバーフローしますか?
4

1 に答える 1

0

必要なものを正確に説明したようです。あなたが私たちの助けを必要としていたかどうかわかりません! ログを 100% に設定し、overflow-y でスクロールするだけです。

http://jsfiddle.net/LPPAP/1

#footer {
    position: fixed;
    bottom: 0;
    width: 600px;
    border: 1px solid gray;
    background: lightgray;
    border-radius: 15px 15px 0px 0px;
    padding: 10px;
    height: 200px;    
    left: 50%;
    margin-left: -300px;
}
#logs { height: 100%; overflow-y: scroll; margin-top: 20px; }
于 2012-04-06T22:26:38.243 に答える