So legen Sie einen prozentualen Höhenwert in HTML/CSS fest

Question 1

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:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

Question 2

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; 
}

):

Question 3

Brian Campell <html> Sie müssen die Höhe auf dem einstellen <body> Und auch Elemente; andernfalls sind sie nur groß genug für den Inhalt.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>

Question 4

Olex Ponomarenko

Bobinces Antwort wird Sie darüber informieren, in welchen Fällen “Höhe: XX%;” wird oder wird nicht funktionieren. aspect-ratio Wenn Sie ein Element mit einem festgelegten Verhältnis (Höhe: % seiner eigenen Breite) erstellen möchten, verwenden Sie die Eigentum. Stellen Sie sicher, dass die Höhe nicht explizit für das Element festgelegt ist, damit es funktioniert.

.square {
  width: 100%;
  height: unset;
  aspect-ratio: 1 / 1;
}

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%;
}

. Beispiel für Quadrat: Der quadratische Behälter besteht nur aus Polsterung, und der Inhalt dehnt sich aus, um den Behälter zu füllen. Langer Artikel von 2009 zu diesem Thema:

Question 5

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

Question 6

Höhe des Ansichtsfensters 100vw / 100vhSie können verwenden

    <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>

Question 7

Jahmic

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);

Question 8

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:

https://www.w3.org/TR/css-sizing-3/ Fast alle Browser unterstützen es: