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

Question

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

Answer 1

Wenn Sie z.B. eine linke Spalte (Höhe 100%) und den Inhalt (Höhe auto) wünschen 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>

Answer 2

Im Seitenquelltext sehe ich folgendes:

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

Wenn Sie den Wert für die Höhe im Tag angeben, wird dieser anstelle der in der CSS-Datei definierten Höhe verwendet.

Answer 3

Wenn Sie die Elemente unbedingt innerhalb des Divs positionieren wollen, können Sie das Padding oben und unten auf 50% setzen.

Also etwa so:

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

Answer 4

Verwenden Sie dies einfach in Ihrem css

html, body {
   height: 100%;
}

Sie werden sehen können 100% Höhe für alle Unterklassen .

Answer 5

Das ist vielleicht nicht ideal, aber man kann es immer mit Javascript machen. Oder in meinem Fall jQuery

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