Prozent Höhe HTML 5 / CSS

175

Ich versuche, <div>eine bestimmte prozentuale Höhe in CSS festzulegen, aber sie bleibt genauso groß wie der Inhalt darin. Wenn ich <!DOCTYTPE html>jedoch HTML 5 entferne , funktioniert es, <div>die gesamte Seite wie gewünscht einzunehmen. Ich möchte, dass die Seite validiert wird. Was soll ich also tun?

Ich habe dieses CSS auf dem <div>, das eine ID von hat page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
html css height D. Strout
quelle
3
Hier ist eine einfache und klare Erklärung der CSS- heightEigenschaft mit Prozentwerten: stackoverflow.com/a/31728799/3597276
Michael Benjamin
behebt das DOCTYPE-Problem: stackoverflow.com/a/32215263/3597276
Michael Benjamin

Antworten:

371

Ich versuche, ein Div in CSS auf eine bestimmte prozentuale Höhe festzulegen

Prozentsatz von was?

Um eine prozentuale Höhe festzulegen, muss das übergeordnete Element (*) eine explizite Höhe haben. Dies ist insofern ziemlich selbstverständlich, als wenn Sie die Höhe als belassen auto, der Block die Höhe seines Inhalts annimmt ... aber wenn der Inhalt selbst eine Höhe hat, ausgedrückt als Prozentsatz des Elternteils, das Sie selbst ein wenig gemacht haben Catch 22. Der Browser gibt auf und verwendet nur die Inhaltshöhe.

Das übergeordnete Element des div muss also eine explizite heightEigenschaft haben. Während diese Höhe auch ein Prozentsatz sein kann, wenn Sie möchten, bringt dies das Problem nur auf die nächste Ebene.

Wenn Sie die Div-Höhe zu einem Prozentsatz der Ansichtsfensterhöhe machen möchten, muss jeder Vorfahr des Div, einschließlich <html>und <body>, haben height: 100%, sodass es eine Kette expliziter Prozenthöhen bis zum Div gibt.

(*: oder, wenn das div positioniert ist, der 'enthaltende Block', der der nächste Vorfahr ist, der ebenfalls positioniert werden soll.)

Alternativ unterstützen alle modernen Browser und IE> = 9 neue CSS-Einheiten in Bezug auf die Höhe des Ansichtsfensters ( vh) und die Breite des Ansichtsfensters ( vw):

div {
    height:100vh; 
}

Sehen Sie hier für weitere Informationen .

Bobince
quelle
Obwohl es nicht für die Ausrichtung des Hochformatbildschirms
funktioniert
1
Bitte sehen Sie die Antwort von Brian Campbell unten. Ich glaube, das ist die richtige Lösung. Diese Antwort scheint eine Problemumgehung zu sein und geht nicht auf das eigentliche Problem ein.
MG Entwickler
69

Sie müssen auch die Höhe für die Elemente <html>und einstellen <body>. Andernfalls sind sie nur groß genug, um zum Inhalt zu passen. Zum 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>
Erweitern Sie das Snippet

Brian Campbell
quelle
6
¬_¬ Ich habe 20 Minuten gebraucht, um herauszufinden, dass ich auch die Höhe des Dokuments auf 100% einstellen musste. Ich habe das etwas zu spät gelesen, aber es ist immer noch sehr brillant. Seufzer
Omninonsense
Dies sollte als Antwort gewählt werden , da es eine Lösung für viele Leute gibt hier fragen kommen , was die erste Antwort kann getan werden , die meisten sehen und denken , es ist nicht möglich und abwandern Denken , ob eine andere Methode besteht ohne Lektüre dieses
codefreaK
Ich bin damit einverstanden, dass dies die richtige Antwort ist. Die Höhe funktioniert nicht, da das übergeordnete Element body und html festgelegt werden muss. Diese Antwort sollte die akzeptierte Antwort sein.
MG Entwickler
Dies ist keine richtige Antwort. Wenn der Inhalt größer ist als der Bildschirmhöhe entspricht, ist der Rest des Inhalts ohnehin nicht mehr sichtbar. Daher wurde die Höhe NICHT auf 100% des Browserfensters, sondern erneut auf 100% festgelegt von Inhalten. Das ist vielleicht nicht logisch, aber genau das passiert in den beiden Hauptbrowsern Firefox und Chrome - probieren Sie es einfach aus. Somit ist die akzeptierte Antwort die einzig richtige.
Nepdev
15

Die Antwort von Bobince teilt Ihnen mit, in welchen Fällen "Größe: XX%;" wird oder wird nicht funktionieren.

Wenn Sie ein Element mit einem festgelegten Verhältnis (Höhe:% der eigenen Breite) erstellen möchten, können Sie die Höhe am besten mithilfe von festlegen padding-bottom. Beispiel für 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 Behälter besteht nur aus Polsterung, und der Inhalt wird erweitert, um den Behälter zu füllen. Langer Artikel aus dem Jahr 2009 zu diesem Thema: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Olex Ponomarenko
quelle
das funktioniert super. Es fühlt sich auch im Browser schnell an, wenn die Größe einer Seite mit mehr als 100 Elementen geändert wird. Vielen Dank!
Dean Grande
5

Sie können verwenden 100vw / 100vh. CSS3 gibt uns sichtfensterbezogene Einheiten. 100vw bedeutet 100% der Breite des Ansichtsfensters. 100vh; 100% der Höhe.

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>
Ahmad Aghazadeh
quelle
4

Hallo! Um Prozent (%) verwenden zu können, müssen Sie den Prozentsatz des übergeordneten Elements definieren. Wenn Sie body {height: 100%} verwenden , funktioniert dies nicht, da die Eltern keinen prozentualen Höhenunterschied haben. In diesem Fall, um diesen zu arbeiten Körpergröße Sie dies in hinzufügen muss html {height: 100%}

In einem anderen Fall können Sie diesen definierenden übergeordneten Prozentsatz entfernen

Körper {Größe: 100vh}

vh steht für viewport height

Ich denke es hilft

Md. A. Barik
quelle
2

Manchmal möchten Sie möglicherweise die Höhe eines Divs bedingt festlegen, z. B. wenn der gesamte Inhalt kleiner als die Höhe des Bildschirms ist. Wenn Sie alle übergeordneten Elemente auf 100% setzen, wird der Inhalt abgeschnitten, wenn er länger als die Bildschirmgröße ist.

Um dies zu umgehen, müssen Sie die Mindesthöhe einstellen:

Lassen Sie die übergeordneten Elemente weiterhin automatisch ihre Höhe anpassen. Subtrahieren Sie dann in Ihrem Hauptteil die Pixelgrößen des Kopf- und Fußzeilendiv. Von 100vh (Ansichtsfenstereinheiten). In CSS so etwas wie:

Mindesthöhe: berechnet (100 vh - 246 px);

100vh ist die gesamte Länge des Bildschirms abzüglich der umgebenden Divs. Wenn Sie die Mindesthöhe und nicht die Höhe einstellen, fließt der Inhalt, der länger als der Bildschirm ist, weiter, anstatt abgeschnitten zu werden.

Jahmic
quelle