Warum funktioniert meine prozentuale CSS-Höhe nicht?

CSS-Höhenprozentsatz funktioniert nicht

Wenn Sie versuchen, die Höhe eines Elements als Prozentsatz anzugeben, wird es möglicherweise nicht wie erwartet angezeigt. Dies liegt daran, dass die prozentuale Höhe relativ zum übergeordneten Element ist. Daher ist es wichtig, die Höhe aller übergeordneten Elemente auf 100 % zu setzen.

Im bereitgestellten Code-Snippet:

<div>

Das Problem entsteht durch das Fehlen einer Höhendeklaration für übergeordnete Elemente, nämlich die Body- und HTML-Elemente. Ohne diese Deklaration wird die prozentuale Höhe für das Div relativ zur Standardhöhe seines übergeordneten Elements interpretiert, die normalerweise nicht festgelegt ist.

Um dieses Problem zu beheben, legen Sie die Höhe sowohl des Body- als auch des HTML-Elements explizit auf 100 % fest. , um sicherzustellen, dass sie das gesamte Ansichtsfenster einnehmen:

html, body { height: 100%; width: 100%; margin: 0; }

Durch das Festlegen der HTML- und Body-Elemente auf 100 % Höhe kann das div-Element nun seine Höhe korrekt berechnen basierend auf der Höhe des übergeordneten Elements, die jetzt 100 % des Ansichtsfensters beträgt. Dadurch wird das Div korrekt angezeigt und seine Höhe erstreckt sich über die gesamte Höhe des Browserfensters.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine prozentuale CSS-Höhe nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!