Wie kann ich dafür sorgen, dass ein übergeordnetes Div automatisch an die Höhe seines untergeordneten Inhalts angepasst wird und gleichzeitig horizontale Bildlaufleisten verhindert werden?

Erweitern eines übergeordneten Elements, um es an die Größe des Kindes anzupassen

In der Webentwicklung ist es häufig erforderlich, übergeordnete Elemente zu erstellen, die sich an die Größe des Kindes anpassen ihre untergeordneten Elemente. Dieses Szenario entsteht bei der Arbeit mit dynamischen Inhalten und responsiven Designs, bei denen die Höhe untergeordneter Elemente schwankt.

Ein häufiges Beispiel ist ein zweispaltiges Layout, bei dem untergeordnete Divs die Höhe des übergeordneten Divs bestimmen. Indem Sie das übergeordnete Div entsprechend erweitern, stellen Sie sicher, dass der gesamte Inhalt ohne horizontale Bildlaufleisten sichtbar ist.

Um dies zu erreichen, setzen Sie die Überlaufeigenschaft des übergeordneten Div auf „Auto“. Dadurch kann der übergeordnete Inhalt vertikal erweitert werden, wenn der untergeordnete Inhalt wächst.

#parent {
  overflow: auto;
}

Problem mit der horizontalen Bildlaufleiste

Wenn die Breite des untergeordneten Inhalts über das Browserfenster hinausgeht, wird der übergeordnete div mit overflow: auto führt eine horizontale Bildlaufleiste ein. Um dies zu verhindern, sollte die Bildlaufleiste auf Seitenebene hinzugefügt werden.

Lösung 1: Überlauf auf übergeordnetem Element

Bei bestimmten Browsern ist die Einstellung overflow-x: versteckt; auf dem übergeordneten Div kann die horizontale Bildlaufleiste entfernt werden, während das übergeordnete Div weiterhin vertikal erweitert werden kann.

#parent {
  overflow: auto;
  overflow-x: hidden;
}

Lösung 2: Anzeigeeigenschaften

Alternativ können Sie die Anzeige verwenden Eigenschaften, um ein tabellenartiges Layout zu erstellen. Legen Sie die Anzeigeeigenschaft des übergeordneten Divs auf „table“ und die Anzeigeeigenschaft der untergeordneten Divs auf „table-row“ fest. Dieser Ansatz stellt sicher, dass das übergeordnete Div erweitert wird, um seine Zeilen (untergeordnete Divs) aufzunehmen, ohne dass eine horizontale Bildlaufleiste erstellt wird.

#parent {
  display: table;
}

#childRightCol, #childLeftCol {
  display: table-row;
}

Diese Lösungen bieten effektive Möglichkeiten, ein übergeordnetes Div basierend auf der Höhe seiner untergeordneten Elemente zu erweitern und gleichzeitig zu verhindern unerwünschte horizontale Bildlaufleisten auf der übergeordneten Ebene.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein übergeordnetes Div automatisch an die Höhe seines untergeordneten Inhalts angepasst wird und gleichzeitig horizontale Bildlaufleisten verhindert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!