<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

Antwoord 9

Hier is een oplossing voor de hoogte.

Gebruik in je CSS:

#your-object: height: 100vh;

Gebruik modernizr voor browsers die vh-unitsniet ondersteunen.

Voeg dit script toe (om detectie toe te voegen voor vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);
        bool= !!(compStyle == height);
    });
    return bool;
});

Gebruik ten slotte deze functie om de hoogte van de viewport toe te voegen aan #your-objectals de browser vh-unitsniet ondersteunt:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

Antwoord 10

Zelfs met alle antwoorden hier, was ik verrast te ontdekken dat geen enkele het probleem echt oploste. Als ik 100vhheight/min-heightgebruikte, brak de lay-out wanneer de inhoud langer was dan een pagina. Als ik in plaats daarvan 100%height/min-heightgebruikte, brak de lay-out wanneer de inhoud kleiner was dan de paginahoogte.

De oplossing die ik vond, die beide gevallen oploste, was om de bovenste twee antwoorden te combineren:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

Antwoord 11

100%werkt anders voor breedte en hoogte.

Als u width: 100%opgeeft, betekent dit “100% van de beschikbare breedte van het bovenliggende element of de breedte van het venster innemen.”

Als u de optie height: 100%, het betekent alleen maar “het nemen van 100% van de beschikbare hoogte van het bovenliggende element.” Dit betekent dat als u niet beschikt over een hoogte opgeven op topniveau element, zal de hoogte van alle kinderen ofwel 0of hoogte van de ouder, en dat is de reden waarom je nodig hebt om het bovenste element ingesteld een min-heightvan raamhoogte.

I lichaam specificeren altijd een minimum hoogte van 100vh hebben en maakt plaatsing en eenvoudige berekeningen,

body {
  min-height: 100vh;
}

Antwoord 12

Probeer deze – getest:

body {
  min-height: 100%;
}
#right, #left {
  height: 100%;
}

Edit: 2020 update:

U kunt vhNu:

#right, #left {
  height: 100vh
}

Antwoord 13

100vw = 100% van de breedte van het kijkvenster.

100vh = 100% van de hoogte van het kijkvenster.

Als u de divbreedte of hoogte van 100% van de browser-window-grootte die u moet gebruiken:

Voor breedte: 100vw

Voor hoogte: 100vh

Of als u wilt instellen kleiner formaat, gebruikt u de CSS calcfunctie. Voorbeeld:

#example {
    width: calc(100vw - 32px)
}

Antwoord 14

Add min-height: 100%en hebben een hoogte niet te geven (of zet het op auto). Het geheel deed het werk voor mij:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

Antwoord 15

De eenvoudigste manier is om het zo te doen.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}

<div class="div-left"></div>
<div class="div-right"></div>

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}
#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

html, 
body {
    height: 100%;
}

.classname-for-right-div /*You could also use an ID*/ { 
  height: 100vh;
}

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}
.left {
  flex: 0 0 60%;
  background-color: tomato;
}
.right {
  flex: 1;
  background-color: pink;
}
body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

height: 100vh;

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}
#one {
  background-color: red;
}
#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}
.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;
}
.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;
}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}
.left, .right {
  flex: 1;
}
.left {
  background: orange;
}
.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
}
#right {
    min-height: 100%;
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100vh; // Height window (vh)
}
.wrapper .left{
  width: 80%; // Width optional, but recommended
}
.wrapper .right{
  width: 20%; // Width optional, but recommended
  background-color: #dd1f26;
}

<!-- 
vw: hundredths of the viewport width.
vh: hundredths of the viewport height.
vmin: hundredths of whichever is smaller, the viewport width or height.
vmax: hundredths of whichever is larger, the viewport width or height.
-->
<div class="wrapper">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>