So legen Sie einen prozentualen Höhenwert in HTML/CSS fest
Lesezeit: 7 Minuten
Ashley Strout
Ich versuche, a einzustellen <div> auf eine bestimmte prozentuale Höhe in CSS, aber es bleibt nur die gleiche Größe wie der darin enthaltene Inhalt. Wenn ich entferne <!DOCTYTPE html> es funktioniert jedoch, die <div> die ganze Seite einnehmen, wie gewünscht. Ich möchte, dass die Seite validiert wird, also was soll ich tun?
Ich habe dieses CSS auf der <div>die eine ID von hat page:
Hier ist eine einfache und klare Erklärung des CSS height Eigenschaft mit Prozentwerten: stackoverflow.com/a/31728799/3597276
– Michael Benjamin
25. August 2015 um 20:12 Uhr
behebt das DOCTYPE-Problem: stackoverflow.com/a/32215263/3597276
– Michael Benjamin
31. Oktober 2015 um 11:54 Uhr
Sehen Sie sich diesen Beitrag an, der eine Antwort basierend auf CSS-Spezifikationen gibt: stackoverflow.com/a/31032477/247696
– Flimmer
1. Juni 2021 um 9:07 Uhr
Bobine
Ich versuche, ein div in CSS auf eine bestimmte prozentuale Höhe zu setzen
Prozent wovon?
Um eine prozentuale Höhe festzulegen, das übergeordnete Element automuss eine explizite Höhe haben. Dies ist insofern ziemlich selbstverständlich, als Sie die Höhe so belassen
nimmt der Block die Höhe seines Inhalts … aber wenn der Inhalt selbst eine prozentuale Höhe des übergeordneten Blocks hat, haben Sie sich selbst zu einem kleinen Catch 22 gemacht. Der Browser gibt auf und verwendet nur die Inhaltshöhe. height Das übergeordnete Element des div muss also eine explizite haben
Eigentum. Diese Höhe kann zwar auch ein Prozentsatz sein, wenn Sie möchten, aber das verschiebt das Problem nur auf die nächste Ebene. <html> Wenn Sie die Div-Höhe zu einem Prozentsatz der Höhe des Ansichtsfensters machen möchten, wird jeder Vorfahre des Div, einschließlich <body>Und height: 100%haben müssen
also gibt es eine Kette expliziter prozentualer Höhen bis hinunter zum div.
(*: oder, wenn das div positioniert ist, der ‘enthaltende Block’, der der nächste Vorfahre ist, der ebenfalls positioniert werden soll.)vhAlternativ unterstützen alle modernen Browser und IE>=9 neue CSS-Einheiten relativ zur Höhe des Darstellungsbereichs (vw) und Ansichtsfensterbreite (
div {
height:100vh;
}
):
Weitere Informationen finden Sie hier.
Obwohl dies nicht für die Ausrichtung des Hochformats funktioniert, stackoverflow.com/questions/23198237/…
– Dchris
21. April 2014 um 13:18 Uhr
Bitte sehen Sie sich die Antwort von Brian Campbell unten an. Ich glaube, das ist die richtige Lösung. Diese Antwort scheint eine Problemumgehung zu sein und behandelt nicht das eigentliche Problem.
– MG-Entwickler
30. April 2017 um 16:12 Uhr Ok warum dann jsfiddle.net/8dkzp49w/16
In diesem Beispiel wird Catch 22 nicht für die Breite erstellt? :/
<!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>
: ¬_¬ Ich brauchte 20 Minuten, um herauszufinden, dass ich auch die Höhe des Dokuments auf 100 % einstellen musste. Ich habe es ein bisschen zu spät gelesen, aber es ist trotzdem sehr brillant.
seufzen
– Alleskönner
30. Dezember 2011 um 14:41 Uhr
Dies sollte als Antwort gestimmt werden, da es eine Lösung für viele Leute bietet, die hierher kommen und sich fragen, was getan werden kann. Die meisten sehen sich die erste Antwort an und denken, dass dies nicht möglich ist, und denken darüber nach, ob es eine andere Methode gibt, ohne dies zu lesen
– codefreak
4. September 2015 um 19:04 Uhr
Ich stimme zu, dass dies die richtige Antwort ist, die Höhe funktioniert nicht, da das übergeordnete Element, das Körper und HTML ist, festgelegt werden muss. Diese Antwort sollte die akzeptierte Antwort sein.
– MG-Entwickler
30. April 2017 um 16:10 Uhr
Dies ist keine richtige Antwort – wenn der Inhalt größer ist als auf die Höhe des Bildschirms passt, ist der Rest des Inhalts sowieso nicht mehr sichtbar, daher wurde die Höhe NICHT auf 100 % des Browserfensters eingestellt, sondern erneut auf 100 % von Inhalten. Das ist vielleicht nicht logisch, aber das passiert in den beiden Hauptbrowsern Firefox und Chrome – probieren Sie es einfach aus. Somit ist die akzeptierte Antwort die einzig richtige.
– nepdev
21. Dezember 2019 um 15:52 Uhr
Das ist es, was ich seit Jahren vermisse: dass die HTML- und BODY-Tags auch eine height:-Einstellung benötigen.
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio padding-bottomIn der Vergangenheit war dies am besten, indem die Höhe mit festgelegt wurde
<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%;
}
das funktioniert super. Es fühlt sich auch im Browser schnell an, während die Größe einer Seite mit mehr als 100 Elementen geändert wird. Danke!
– Großer Dekan
Benutzeravatar von Md. A. Barik
Md. A. Barik body{height: 100%} Um den Prozentsatz (%) zu verwenden, müssen Sie den % des übergeordneten Elements definieren. Wenn du benutzt es wird nicht funktionieren, weil sein Elternteil keinen Prozentwert in der Höhe hat. In diesem Fall, um das zu bearbeiten Körpergröße html{height:100%}
Sie müssen dies hinzufügen
body{height:100vh}
In anderen Fällen können Sie verwenden, um diesen definierenden Elternprozentsatz loszuwerden vh steht für
Höhe des Ansichtsfensters 100vw / 100vhSie können verwenden
Manchmal möchten Sie möglicherweise die Höhe eines div-Elements 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.
Der Weg, dies zu umgehen, besteht also darin, die Mindesthöhe festzulegen:
Lassen Sie die übergeordneten Elemente weiterhin ihre Höhe automatisch anpassen. Subtrahieren Sie dann in Ihrem Haupt-Div die Pixelgrößen des Header- und Footer-Div von 100vh (Viewport-Einheiten). In CSS so etwas wie:
Mindesthöhe: calc(100vh – 246px);
der Benutzer-Avatar des Hutt
die Hütte block-size Mit neuen CSS-Größeneigenschaften können Sie davonkommen, ohne die genaue Höhe für das übergeordnete Element festzulegen. Das neue inline-size Und
<!DOCTYPE html>
<style>
#parent {
border: 1px dotted gray;
height: auto; /* auto values */
width: auto;
}
#wrapper {
background-color: violet;
writing-mode: vertical-lr;
block-size: 30%;
inline-size: 70%;
}
#child {
background-color: wheat;
writing-mode: horizontal-tb;
width: 30%; /* set to 100% if you don't want to expose wrapper */
height: 70%; /* none of the parent has exact height set */
}
</style>
<body>
<div id=parent>
<div id=wrapper>
<div id=child>Lorem ipsum dollar...</div>
Eigenschaften können wie folgt verwendet werden:
Ändern Sie die Größe des Browserfensters im Vollseitenmodus. Ich denke, die Werte sind relativ zur Höhe und Breite des Ansichtsfensters. Weitere Informationen finden Sie unter:
Hier ist eine einfache und klare Erklärung des CSS
height
Eigenschaft mit Prozentwerten: stackoverflow.com/a/31728799/3597276– Michael Benjamin
25. August 2015 um 20:12 Uhr
behebt das DOCTYPE-Problem: stackoverflow.com/a/32215263/3597276
– Michael Benjamin
31. Oktober 2015 um 11:54 Uhr
Sehen Sie sich diesen Beitrag an, der eine Antwort basierend auf CSS-Spezifikationen gibt: stackoverflow.com/a/31032477/247696
– Flimmer
1. Juni 2021 um 9:07 Uhr