Ich versuche, ein <div>
auf eine bestimmte prozentuale Höhe in CSS zu setzen, aber es bleibt einfach die gleiche Größe wie der Inhalt darin. Wenn ich jedoch das HTML 5 <!DOCTYTPE html>
entferne, funktioniert es und das <div>
nimmt wie gewünscht die gesamte Seite ein. Ich möchte, dass die Seite validiert wird, was soll ich also tun?
Ich habe dieses CSS auf dem <div>
, das eine ID von page
hat:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
Ich versuche, ein div auf eine bestimmte prozentuale Höhe in CSS zu setzen
Prozentsatz von was?
Um eine prozentuale Höhe festzulegen, muss das übergeordnete Element (*) eine bestimmte Höhe haben. Das ist ziemlich offensichtlich, denn wenn Sie die Höhe auf "Auto" belassen, nimmt der Block die Höhe seines Inhalts an... aber wenn der Inhalt selbst eine Höhe hat, die als Prozentsatz des übergeordneten Elements ausgedrückt wird, haben Sie sich selbst in einen kleinen Zwiespalt gebracht. Der Browser gibt auf und verwendet einfach die Höhe des Inhalts.
Das übergeordnete Element des div muss also eine explizite Eigenschaft "height" haben. Diese Höhe kann zwar auch ein Prozentsatz sein, wenn Sie wollen, aber das verschiebt das Problem nur auf die nächste Ebene.
Wenn man die div-Höhe zu einem Prozentsatz der Viewport-Höhe machen will, muss jeder Vorgänger des div, einschließlich <html>
und <body>
, height: 100%
haben, so dass es eine Kette von expliziten prozentualen Höhen bis hinunter zum div gibt.
(*: oder, wenn das div positioniert ist, der "enthaltende Block", der der nächste Vorfahre ist, der ebenfalls positioniert werden muss.)
Alternativ dazu unterstützen alle modernen Browser und der IE>=9 neue CSS-Einheiten relativ zu Viewport-Höhe (vh
) und Viewport-Breite (vw
):
div {
height:100vh;
}
Siehe hier für weitere Informationen.
Sie müssen die Höhe der Elemente <html>
und <body>
ebenfalls festlegen; andernfalls sind sie nur groß genug, um den Inhalt aufzunehmen. Beispiel:
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
bobince's Antwort wird Sie wissen lassen, in welchen Fällen "Höhe: XX%;" funktionieren wird oder nicht.
Wenn Sie ein Element mit einem bestimmten Verhältnis (Höhe: % seiner eigenen Breite) erstellen möchten, ist der beste Weg, dies zu tun, indem Sie die Höhe effektiv mit "padding-bottom" festlegen. Beispiel für ein Quadrat:
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
Der quadratische Container besteht dann nur noch aus padding, und der Inhalt füllt den Container aus. Langer Artikel von 2009 zu diesem Thema: http://alistapart.com/article/creating-intrinsic-ratios-for-video