Prozentuale Höhe HTML 5 / CSS

StackOverflow https://stackoverflow.com/questions/1622027

  •  06-07-2019
  •  | 
  •  

Frage

Ich versuche, eine <div> auf eine bestimmte Prozentsatz Höhe in CSS zu setzen, aber es bleibt nur die gleiche Größe wie der Inhalt in seinem Innern. Wenn ich die HTML 5 <!DOCTYTPE html> jedoch entfernen, es funktioniert, nehmen die <div> die ganze Seite wie gewünscht. Ich möchte die Seite zu bestätigen, also was soll ich tun?

Ich habe diese CSS auf dem <div>, die eine Identifikation von page hat: 

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

Lösung

  

Ich versuche, ein div auf einen bestimmten Prozentsatz Höhe in CSS zu setzen

Prozentsatz von dem, was?

einen prozentualen Höhe einzustellen, ihr Mutterelement (*) eine explizite Höhe hat. Das ist ziemlich selbstverständlich, dass, wenn Sie Höhe wie auto lassen, wird der Block, der die Höhe des Inhalts übernehmen ... aber wenn der Inhalt selbst eine Höhe in Bezug auf den Anteil der Mutter ausgedrückt hat Sie haben sich ein gemacht wenig Fang 22. Der Browser gibt und nutzt nur den Inhalt der Höhe.

Also die Eltern des div muss eine explizite height Eigenschaft. Während die Höhe auch einen Prozentsatz sein können, wenn Sie wollen, dass nur verschiebt das Problem auf die nächste Ebene.

Wenn Sie einen Prozentsatz der Darstellungshöhe der div Höhe zu machen, jeder Vorfahr des div, einschließlich <html> und <body>, haben height: 100% haben, so gibt es eine Kette von expliziten Prozentsatz Höhen bis in den div.

(*. Oder, wenn der div positioniert ist, die ‚umschließende Block‘, der die nächsten Vorfahren sind auch positioniert werden)

Alternativ können alle modernen Browser und IE> = 9 Unterstützung relativ neue CSS-Einheiten Höhe zu Darstellungsfeld (vh) und Darstellungsbreite (vw): 

div {
    height:100vh; 
}

Sehen Sie hier für weitere Informationen href="https://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window">.

Andere Tipps

Sie müssen auch die Höhe auf den <html> und <body> Elemente setzen; andernfalls werden sie nur groß genug sein, um den 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>

bobince Antwort wird Sie wissen lassen, in welchen Fällen "height: XX%;" wird oder nicht.

Wenn Sie ein Element mit einem Satz Verhältnis erstellen möchten (Höhe:% der seine eigene Breite), der beste Weg, dies zu tun ist, indem effektiv die Höheneinstellung mit 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 Platz Container wird nur von padding gemacht werden, 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- für-Video

Sie können 100vw / 100vh verwenden. CSS3 gibt uns Ansichtsfenster-relative Einheiten. 100vw bedeutet 100% des Darstellungsbreite. 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>

Manchmal, können Sie bedingt die Höhe eines div eingestellt, wie wenn der gesamte Inhalt ist geringer als die Höhe des Bildschirms. Einstellung aller Eltern Elemente zu 100% werden Inhalte abgeschnitten, wenn es länger als die Bildschirmgröße ist.

Also, die Art und Weise, dies zu umgehen ist es, den min-height zu setzen:

Weiter die übergeordneten Elemente automatisch anpassen ihre Höhe lassen Dann in Ihrem Haupt-div, subtrahiert die Pixelgrößen der Kopf- und Fußzeile div von 100vh (Ansichtsfenster Einheiten). In CSS, so etwas wie:

min-height: ber (100vh - 246px);

100vh ist voller Länge des Bildschirms, minus die umliegenden divs. Durch die Einstellung min-height und nicht die Höhe, Inhalt länger als Bildschirm wird auch weiterhin statt fließen, immer abgeschnitten.

  

Hallo!   Um Prozentsatz zu verwenden (%), müssen Sie das% davon geordneten Element definieren. Wenn Sie body {height: 100%} es wird nicht funktionieren, weil es Eltern keinen Prozentsatz in Höhe aufweisen. In diesem Fall, um zu arbeiten, dass Körpergröße Sie müssen dieses Add in html {height: 100%}

Im anderen Fall, um loszuwerden, dass die Definition Mutter Prozentsatz können Sie

body {height: 100vh}

vh steht für Ansichtsfenster Höhe

Ich denke, es hilft

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top