BinaryDevelop
  1. ホーム
  2. css

[解決済み] 子 div が親 div からはみ出さないようにする。

2022-02-14 08:03:48

質問

ヘッダー部とボディ部を含む親divがあります。親 div には高さの最大値がありますが、高さの最小値はありません。

この例をご覧ください。 https://jsfiddle.net/1o79a6nc/2/ 

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
}
#head {
  background-color: green;
}

<div id='cont'>
  <div id='head'>
    <div>Head</div>
  </div>
  <div id='body'>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
  </div>
</div>

ボディは親の中に収まるようにだけ展開し（パディングを含む）、必要に応じてスクロールバーを適用させたいのです。

この例のように、私は overflow-y: auto しかし、これは私が意図したとおりに動作していません。

編集：スクロールバーはボディのみに表示させ、ヘッドセクションと親のボトムパディングは常に表示されるようにしたい。

解決方法は？

単純にコンテナをフレックスボックスに設定すればいいのです。 

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  display: flex; /*added*/
  flex-direction: column; /*added*/
}

jsFiddle 

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  display: flex; /*added*/
  flex-direction: column; /*added*/
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1; /* added */
}
#head {
  background-color: green;
}

<div id='cont'>
  <div id='head'>
    <div>Head</div>
  </div>
  <div id='body'>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
  </div>
</div>

また、CSSテーブルを使用する方法もありますが、HTMLのコードが追加で必要になります。そして max-height はテーブルレイアウトでは動作しないので height の代わりに

jsFiddle 

#cont {
  padding: 5px;
  background-color: red;
  height: 150px;
  width: 50%;
  display: table;
}
#head,
#body {
  display: table-row;
}
#head > div,
#body > div {
  display: table-cell;
  position: relative;
}
#body > div {
  height: 100%;
}
#body > div > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
}
#head {
  background-color: green;
}

<div id='cont'>
  <div id='head'>
    <div>Head</div>
  </div>
  <div id='body'>
    <div>
      <div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
      </div>
    </div>
  </div>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します