Waarom werkt hoogte niet: 100% werkt om divs uit te breiden naar schermhoogte?

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

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

Antwoord 2, autoriteit 35%

_{Omdat niemand dit heeft genoemd..}

Moderne aanpak:

Als alternatief voor het instellen van de hoogte van zowel het html/body-element op 100%, kunt u ook lengtes van viewport-percentages gebruiken:

5.1.2. Viewport-percentagelengtes: de eenheden ‘vw’, ‘vh’, ‘vmin’, ‘vmax’

De lengtes van het kijkvenster zijn relatief ten opzichte van de grootte van het oorspronkelijke blok. Wanneer de hoogte of breedte van het oorspronkelijke bevattende blok wordt gewijzigd, worden ze overeenkomstig geschaald.

In dit geval kunt u de waarde 100vhgebruiken (die de hoogte van de viewport is) – (voorbeeld)

body {
    height: 100vh;
}

Een min-heightwerkt ook. (voorbeeld)

body {
    min-height: 100vh;
}

Deze units worden ondersteund in de meeste moderne browsers – ondersteuning is hier te vinden .

Antwoord 3, Autoriteit 6%

U moet ook 100% hoogte instellen op de html-element:

html { height:100%; }

Antwoord 4, Autoriteit 5%

U kunt ook, als u position: absolutedan height: 100%werkt prima.

Antwoord 5, Autoriteit 2%

U moet proberen met de ouderelementen;

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

Dan is dit voldoende:

#s7 {
   height: 100%;
}

Antwoord 6

Als u wilt, bijvoorbeeld, een linkerkolom (hoogte 100%) en de inhoud (hoogte auto)
U kunt absoluut gebruiken:

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

Antwoord 7

Dit is misschien niet ideaal, maar je kunt het altijd doen met javascript.
Of in mijn geval jQuery

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

Antwoord 8

Als u de elementen absoluut binnen de div plaatst, kunt u de opvulling boven en onder op 50% instellen.

Dus zoiets als dit:

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

Antwoord 9

In de paginabron zie ik het volgende:

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

Als je de hoogtewaarde in de tag plaatst, wordt deze gebruikt in plaats van de hoogte die in het css-bestand is gedefinieerd.

Antwoord 10

Hier is nog een oplossing voor mensen die html, body, .blah { height: 100% }niet willen gebruiken.

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

.myClassName {
    overflow: auto;
    height: calc(100% - 1.5em);
}