it-swarm.com.de

Verhindern, dass untergeordnetes div übergeordnetes div überläuft

Ich habe ein übergeordnetes div, das einen Kopfabschnitt und einen Hauptteil enthält. Das übergeordnete div hat eine maximale Höhe, jedoch keine minimale Höhe.

Sehen Sie sich dieses Beispiel an: 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>

Ich möchte, dass der Körper nur so erweitert wird, dass er in das übergeordnete Element (einschließlich der Auffüllung) passt, und dass bei Bedarf Bildlaufleisten angewendet werden.

Wie das Beispiel zeigt, habe ich overflow-y: auto ausprobiert, dies funktioniert jedoch nicht wie beabsichtigt.

Bearbeiten: Ich möchte, dass Bildlaufleisten nur auf dem Hauptteil angezeigt werden, sodass der Kopfbereich und die übergeordnete untere Auffüllung immer sichtbar sind.

8
Right Of Zen

Sie können den Container einfach auf Flexbox setzen.

#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>

Eine andere Option wäre die Verwendung einer CSS-Tabelle. Es wird zusätzlicher HTML-Code benötigt. Und max-height funktioniert nicht mit dem Tabellenlayout, verwenden Sie stattdessen 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>

9
Stickers

ich habe dein jsfiddle aktualisiert

jsfiddle

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  overflow-y: scroll;
}
#body {
  background-color: blue;

}
#head {
  background-color: green;
}
2
kapigsaan