Warum nicht Höhe: 100% Arbeit, um Divs auf die Bildschirmhöhe zu erweitern?

295

Ich möchte, dass sich das Karussell DIV (s7) auf die Höhe des gesamten Bildschirms ausdehnt. Ich habe keine Ahnung, warum es nicht gelingt. Um die Seite zu sehen, können Sie hier gehen .

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

Erweitern Sie das Snippet

html css height Earl Larson
quelle

2

Hier ist eine einfache und klare Erklärung: stackoverflow.com/a/31728799/3597276

Michael Benjamin

wahrscheinlich beste Lösung für verschachtelte Elemente, die sich nicht bis zur Höhe des gesamten Fensters erstrecken sollten stackoverflow.com/questions/7049875/height-100-not-working/…

B-GangsteR

409

Damit ein Prozentwert für die Körpergröße funktioniert, muss die Körpergröße des Elternteils bestimmt werden. Die einzige Ausnahme ist das Wurzelelement , das ein Prozentsatz der Höhe sein kann. .<html>

Sie haben also alle Elemente mit Ausnahme der angegeben <html>, also sollten Sie Folgendes hinzufügen:

html {
    height: 100%;
}

Und Ihr Code sollte gut funktionieren.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

Erweitern Sie das Snippet

JsFiddle Beispiel .

Madaras Geist
quelle

23

Ok, das könnte mich unglaublich dumm aussehen lassen, aber was auch immer : Wollen Sie damit sagen, dass dies <html>ein tatsächliches Element ist - genau wie <p>oder <img />? Ich dachte, der einzige Zweck wäre <html>, den Anfang und das Ende eines HTML-Dokuments zu definieren. Ich meine, ich dachte, dass es da war, nicht für das Layout, sondern nur, damit der Browser weiß, welche Art von Dokument er betrachtet? Ich bin total überwältigt.

jay_t55

29

@ Joey: HTML ist ein tatsächliches Element. Sie können es mit CSS formatieren, Ereignisse in JavaScript einbinden, Klassen und IDs hinzufügen und es wird im DOM angezeigt. Der Browser nimmt ein HTML-Dokument auch ohne das <html>Tag und sogar ohne die Elemente <head>oder an <body>. HTML-Spezifikationen halten das <html>Tag jedoch für obligatorisch. Kurz gesagt, ja, es ist ein vollwertiges Element wie alle anderen HTML-Elemente.

Madaras Geist

1

@SecondRikudo: Nein, das <html>Tag ist gemäß den Spezifikationen optional (z. B. HTML4 und HTML5). Und ja, das Element wird trotzdem erstellt.

Robert Siemer

2

hmmm ... für mich ist dies der einzige Weg , gearbeitet wurde sowohl zu setzen htmlund bodyals height: 100%(sowie natürlich die spezifische divmöchte ich die 100% Höhe erben)

james

1

@ James Ja, alle Eltern müssen eine bekannte Größe haben.

Madaras Geist

147

_{Da hat das noch niemand erwähnt ..}

Moderner Ansatz:

Alternativ zum Festlegen der Höhe des Elements html/ bodyauf 100%können Sie auch die prozentualen Längen des Ansichtsfensters verwenden:

5.1.2. Prozentuale Länge des Ansichtsfensters: die Einheiten 'vw', 'vh', 'vmin', 'vmax'

Die prozentualen Längen des Ansichtsfensters beziehen sich auf die Größe des anfänglichen enthaltenden Blocks. Wenn die Höhe oder Breite des anfänglich enthaltenen Blocks geändert wird, werden sie entsprechend skaliert.

In diesem Fall können Sie den Wert 100vh(der die Höhe des Ansichtsfensters darstellt) - (Beispiel) verwenden.

body {
    height: 100vh;
}

Das Einstellen von min-heightfunktioniert auch. (Beispiel)

body {
    min-height: 100vh;
}

Diese Geräte werden in den meisten modernen Browsern unterstützt - Unterstützung finden Sie hier .

Josh Crozier
quelle

1

Ich sehe überhaupt keinen Nutzen daraus. Schafft es nicht zusätzliche Arbeit für den Browser, der alles berechnen muss, was mit dem Browser-Ansichtsfenster zusammenhängt? Die Größe des Ansichtsfensters scheint nur dann von Vorteil zu sein, wenn Sie tatsächlich eine Größe in Bezug auf die Browserhöhe festlegen möchten.

Robert ging am

12

@ RobertWent Es gibt Vorteile. Funktioniert beispielsweise height: 100%nur, wenn das übergeordnete Element eine definierte Höhe hat. Es gibt sicherlich einige Fälle, in denen das übergeordnete Element eines Elements keine definierte Höhe hat und prozentuale Einheiten des Ansichtsfensters dies beheben. Mit anderen Worten, wenn Sie ein tief verschachteltes Element hätten, könnten Sie es einfach festlegen 100vh, und es hätte eine Höhe des 100%Browsers. Sie sehen vielleicht keine Vorteile, aber ich war in zahlreichen Fällen, in denen sie die einzige Lösung waren. Diese Einheiten sind möglicherweise nicht so nützlich für Wurzelelemente wie html/ body, aber dennoch ist dies eine Alternative

Josh Crozier

2

Aber wir sprechen über das Körperelement, nicht über ein tief verschachteltes Element. Es gibt nur ein mögliches übergeordnetes Element, das HTML-Element. Aus diesem Grund habe ich erwähnt, dass ich keinen Nutzen sehe und es möglicherweise schlimmer ist, als nur 100% einzustellen. Ihr Kommentar sagt nichts, was mich sonst dünn machen könnte. Nur weil etwas neu ist, wird es nicht besser. Es ist jedoch eine Alternative.

Robert ging am

4

Ein Problem bei diesem Ansatz besteht darin, dass iPhones die Adressleiste und die untere Navigation von der Ansichtshöhe ausschließen, was bedeutet body { height: 100vh }, dass beim ersten Laden der Seite eine Bildlaufleiste angezeigt wird.

BHOLT

2

Nett. Ich habe den anderen Ansatz ausprobiert, ich habe height: 100% !important" to each parent til HTML ohne Erfolg gesetzt, ich konnte im Dom sehen, dass jeder Knoten des Baums tatsächlich war, 100%aber ich konnte es nicht schaffen, die 100% im gewünschten Element festzulegen, aber mit dem Ansichtsfenster-Stil war es einfach

Pmiranda

25

Sie müssen außerdem eine Höhe von 100% für das htmlElement festlegen :

html { height:100%; }

shanethehat
quelle

20

Alternativ, wenn Sie position: absolutedann verwenden, height: 100%wird gut funktionieren.

Steve Tauber
quelle

4

Wäre eine großartige Lösung, wenn ich nicht Flexbox zum Erstellen meines Layouts verwenden würde. : /

Landon Anruf

2

Vergiss nicht zu setzen width:100%;und die Eltern position:relative;.

Kai Noack

8

Sie sollten es mit den übergeordneten Elementen versuchen.

html, body, form, main {
    height: 100%;
}

Dann reicht das:

#s7 {
   height: 100%;
}

mrbengi
quelle

5

Wenn Sie beispielsweise eine linke Spalte (Höhe 100%) und den Inhalt (Höhe automatisch) möchten, können Sie absolut verwenden:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

in html:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

YellowMart
quelle

2

Dies ist möglicherweise nicht ideal, aber Sie können es immer mit Javascript tun. Oder in meinem Fall jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

oBo
quelle

5

Niemals eine gute Idee, Javascript zu verwenden, wenn CSS allein ausreicht.

Bosworth99

1

Warum überhaupt so etwas tun und es mehr komplizieren, als es sein sollte? Ich verstehe einige Antworten nicht lol ...

CapturedTree

1

In der Seitenquelle sehe ich Folgendes:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

Wenn Sie den Höhenwert in das Tag einfügen, wird dieser anstelle der in der CSS-Datei definierten Höhe verwendet.

Steven
quelle

Das ist seltsam, weil ich Folgendes in der Seitenquelle sehe: <div class = "owner"> <tr> <td> <div id = "s7"> <div id = "posts">

Earl Larson

Ok, obwohl ich nicht weiß, wie Sie Ihren obigen Code erhalten haben, habe ich <div id = "s7"> in <div id = "s7" style = "height: 100%;"> geändert und es hat funktioniert. Vielleicht versteckt es etwas vor mir? Wie auch immer, danke :)

Earl Larson

1

Wenn Sie die Elemente absolut innerhalb des Div positionieren, können Sie die Polsterung oben und unten auf 50% einstellen.

Also so etwas wie das:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

Keith Brown
quelle

1

Ich sehe nicht, wie das funktionieren könnte, da die 50% relativ zur Breite und nicht zur Höhe des enthaltenen Elements sind, oder fehlt mir hier etwas?

DrLightman

0

Hier ist eine weitere Lösung für Leute, die nicht verwenden möchten html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

Erweitern Sie das Snippet

TheMisir
quelle

Warum nicht Höhe: 100% Arbeit, um Divs auf die Bildschirmhöhe zu erweitern?

Antworten:

Moderner Ansatz: