Warum nicht height: 100% Arbeit zu erweitern divs, um die Bildschirmhöhe?

Möchte ich die carousel DIV (s7) zu erweitern, um die Höhe des gesamten Bildschirms. Ich habe nicht eine Idee, warum es nicht gelingt. Um zu sehen, die Seite, die Sie gehen können,hier.

CSS:

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

HTML:

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

InformationsquelleAutor Earl Larson | 2011-08-13
  1. 348

    Damit ein prozentualer Wert, um arbeiten in der Höhe, der Eltern, die Höhe muss ermittelt werden. Die einzige Ausnahme ist die root element <html>, die einen prozentualen Höhe. .

    So, die Sie gegeben haben, alle Ihre Elemente Höhe, mit Ausnahme der <html>, so was sollten Sie tun ist, fügen Sie diese:

    html {
    height: 100%;
}

    Und dein code sollte funktionieren.

    CSS:

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

    HTML:

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

    JsFiddle-Beispiel.

    • Ok, so könnte dies mich unglaublich dumm, aber was: willst du damit sagen, dass <html> ist ein ist - element - genau wie <p> oder <img />? Ich dachte, der einzige Zweck <html> zu bestimmen, der Anfang und das Ende eines HTML-Dokuments. Ich meine, ich dachte, es war da, nicht für layout -, aber nur, damit der browser weiß, whar Art von Dokument es ist zu suchen? Ich bin völlig Geist-geblasen.
    • HTML ist ein Tatsächliches element. Sie können style es mit CSS -, Haken-Ereignisse in JavaScript, add-Klassen und-IDs um, und es erscheint in der DOM. Der browser davon ausgehen, dass ein HTML-Dokument auch ohne die <html> tag, und auch ohne die <head> oder <body> Elemente. HTML-Spezifikationen allerdings davon aus, dass die <html> tag obligatorisch. Kurz gesagt, ja, es ist ein vollwertiges element wie alle anderen HTML-Elemente.
    • Nein, die <html> tag ist optional, gemäß den Spezifikationen (z.B. HTML4 und HTML5). Und ja, das element wird trotzdem erstellt.
    • ist richtig; die <html> start-und end-tags sind nur dann erforderlich, XHTML, wo Sie angeben müssen, all die Dinge.
    • hmmm... für mich der einzige Weg, diese gearbeitet wurde, um sowohl html und body als height: 100% (sowie natürlich die spezifischen div ich will Erben, der 100% Höhe)
    • Ja, alle Eltern müssen ein bekannter Höhe.

    InformationsquelleAutor Madara Uchiha
  2. 121

    Da hat niemand erwähnt, dass dieses..

    Modernen Ansatz:

    Als alternative zur Einstellung sowohl die html/body element Höhen zu 100% Sie können auch die viewport-percentage lengths:

    5.1.2. Viewport-percentage lengths: die 'vw', 'vh', 'vmin', 'vmax' - Einheiten

    Viewport-percentage lengths sind im Verhältnis zu der Größe des initial containing block. Wenn Sie die Höhe oder Breite des anfänglichen umschließenden Blocks geändert wird, werden Sie entsprechend skaliert.

    In diesem Fall können Sie den Wert verwenden, der 100vh (welche die Höhe des Viewports) - (Beispiel)

    body {
    height: 100vh;
}

    Einstellung ein min-height auch funktioniert. (Beispiel)

    body {
    min-height: 100vh;
}

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

    • Ich sehe keinen Vorteil überhaupt. Ist es nicht zusätzliche Arbeit für den browser, die Bedürfnisse zu berechnen, alles rund um die browser-viewport? Viewport Dimensionierung scheint nur vorteilhaft, wenn Sie wollen, um tatsächlich die Größe etwas mit der browser-Höhe.
    • Gibt es Vorteile. Zum Beispiel height: 100% funktioniert nur, wenn das übergeordnete element hat eine definierte Höhe. Es gibt sicherlich einige Fälle, in denen ein element das Eltern nicht haben eine definierte Höhe-und viewport-percentage-Einheiten lösen, die. In anderen Worten, wenn Sie hatte eine tief verschachtelte element, Sie konnte einfach 100vh, und es würde eine Höhe von 100% des Browsers. Sie kann nicht sehen keine Vorteile, aber ich habe in zahlreichen Fällen waren Sie die einzige Lösung. Diese Einheiten können nicht als vorteilhaft für die root-Elemente wie html/body, aber trotzdem ist dies eine alternative
    • Aber wir sprechen über das body-element, nicht eine tief verschachtelte element. Es gibt nur ein mögliches Elternteil, das html-element. Dies ist der Grund, warum ich erwähnt, dass ich sehe keinen Vorteil und es ist vielleicht schlimmer als nur die Einstellung 100%. Dein Kommentar sagt nichts, um mich zu Dünn sonst. Nur weil etwas neu ist, macht es nicht besser. Es ist jedoch eine alternative.
    • Definition von viewport-percentage lengths ist irreführend. Für real, es ist nur die Größe des Viewports, also browser-Fenster-in den meisten Fällen.
    • Ein Problem bei diesem Ansatz ist, dass iPhones schließt die Adressleiste und unten die navigation aus der Sicht Höhe, was bedeutet, dass body { height: 100vh } wird eine Bildlaufleiste auf der ersten Seite zu laden.
    InformationsquelleAutor Josh Crozier
  3. 21

    Müssen Sie auch 100% Höhe auf die html element:

    html { height:100%; }
    InformationsquelleAutor shanethehat
  4. 19

    Alternativ, wenn Sie position: absolute dann height: 100% gut funktionieren wird.

    • Wäre eine große Lösung sein, wenn ich nicht mit flexbox, um meine layout. :/
    • Vergessen Sie nicht die width:100%; und die Eltern position:relative;.
    • Das ist das, was ich suchte, danke!
    InformationsquelleAutor Steve Tauber
  5. 6

    Sollten Sie versuchen, mit den übergeordneten Elementen;

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

    Dann wird dies genug sein :

    #s7 {
   height: 100%;
}
    InformationsquelleAutor HQtunes.epizy
  6. 4

    wenn Sie wollen, zum Beispiel, eine linke Spalte (Höhe 100%) und die Inhalte (Höhe auto)
    Sie können absolute :

    #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>
    InformationsquelleAutor YellowMart
  7. 1

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

    <script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
    • Nie eine gute Idee, javascript zu verwenden, wenn css allein wird ausreichen.
    • Warum auch so etwas tun und erschweren es mehr als es sein sollte? Ich verstehe nicht, einige Antworten lol...
    InformationsquelleAutor oBo
  8. 0

    In den Quelltext der Seite sehe ich Folgendes:

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

    Wenn du die Höhe Wert in das tag zu verwenden, wird diese statt der angegebenen Höhe in der css-Datei.

    • Das ist seltsam, denn dies ist, was ich sehe in der Seite Quelle :<div class="holder"> <tr><td> <div id="s7"> <div id="posts">
    • Ok, während ich nicht wissen, wie Sie Ihren code oben, ich ging auf und veränderte <div id="s7"> zu <div id="s7" style="height:100%;"> und es funktionierte. Vielleicht ist es versteckt etwas von mir? So oder so, danke 🙂
    InformationsquelleAutor Steven
  9. 0

    Wenn Sie absolut die position der Elemente innerhalb der div, können Sie die Polsterung oben und unten auf 50%.

    So etwas wie dieses:

    #s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}
    • Ich sehe nicht, wie das funktionieren könnte, da die 50% ist relativ zu der Breite nicht die Höhe des enthaltenden Elements, oder bin ich hier etwas fehlt?
    InformationsquelleAutor Keith Brown
Schreibe einen Kommentar