3

高さが固定のコンテナ div があります。いくつかのコンテンツと別の子要素があります。残りの高さを満たしたときに子要素をスクロールしたいと思います。

うまくいくように見える解決策を思いつきましたが、それが正しいかどうかはわかりません。

<style type="text/css">
  #container {height: 100px; width: 100px; border: solid; }
  #titlebar { background: gray;}
  #app-body {height: 100px; overflow: auto; background: lightblue;}    
</style>

ワーキングフィドル。編集：スタイルタグを削除するためにフィドルを更新しました。

より良い方法はありますか？子 div でコンテナの高さを言い直すのは好きではありません。

4

3 に答える 3

1

これは実験的な CSS の可能性に関するメモです。より明確に見えるように、コンテナの高さと幅を広くしました。

 #container {
      height: 200px;
      width: 200px;
      border: solid;
    overflow: auto;
  }
  #titlebar {
      background: gray;
  }
  #body {
      height:calc(100% - 4em); /* definitely non standard - the 4 em is an approximate size of the titlebar*/
      overflow: auto;
      background: lightblue;
  }

/*Old answer - disregard */

/*#container {
    height: 100px;
    width: 100px;
    border: solid;
    overflow:auto;   /* overflow belongs here *//*
}
#titlebar {
    background: gray;
}
#app-body {

    background: lightblue;
}*/
于 2013-06-03T22:22:23.800 に答える
1

Display:table は便利かもしれません:
デモhttp://jsfiddle.net/GCyrillus/Vedkw/1

html, body {height:100%;width:100%;margin:0;}
#container {display:table;height:100%;width:100%;}
#titlebar, #body {display:table-row;height:100%;}
/* overwrite height of titlebar */
#titlebar{height:auto;}

編集: 少し掘り下げてください。これは基本的なレイアウトであり、使用できます。b #body
の内部コンテンツはスクロールできます。

于 2013-06-03T22:39:59.297 に答える