463 Stimmen

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

Ich möchte das Karussell DIV (s7) auf die Höhe des gesamten Bildschirms zu erweitern. Ich habe keine Ahnung, warum es nicht erfolgreich ist. Um die Seite zu sehen, können Sie gehen aquí .

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

591voto

Madara's Ghost Punkte 165354

Damit ein prozentualer Wert für die Größe funktioniert, muss die Größe des Elternteils bestimmt werden. Die einzige Ausnahme ist der Wurzel Element <html> , die eine prozentuale Höhe sein kann.

Sie haben also allen Ihren Elementen eine Höhe gegeben, außer dem <html> Sie sollten also 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>

JsFiddle Beispiel .

223voto

Josh Crozier Punkte 217174

Da niemand dies erwähnt hat

Ein moderner Ansatz:

Als Alternative zur Einstellung der beiden html / body die Höhen des Elements auf 100% können Sie auch die prozentuale Länge des Ansichtsfensters verwenden:

5.1.2. Prozentuale Länge des Bildausschnitts: die Einheiten "vw", "vh", "vmin", "vmax

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

In diesem Fall könnten Sie den Wert 100vh (das ist die Höhe des Ansichtsfensters) - (Beispiel)

body {
    height: 100vh;
}

Einstellung einer min-height funktioniert auch. (Beispiel)

body {
    min-height: 100vh;
}

Diese Einheiten werden von den meisten modernen Browsern unterstützt - Unterstützung finden Sie hier .

30voto

shanethehat Punkte 15355

Sie müssen auch die Höhe von 100% für die html Element:

html { height:100%; }

29voto

Steve Tauber Punkte 8593

Alternativ dazu können Sie mit position: absolute puis height: 100% wird gut funktionieren.

11voto

tubefavorites.com Punkte 3370

Sie sollten es mit den übergeordneten Elementen versuchen;

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

Dann wird dies ausreichen:

#s7 {
   height: 100%;
}

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X