Vraag Hoe een div 100% hoogte van het browservenster maken?


Ik heb een lay-out met twee kolommen - een links div en een recht div.

Het recht div heeft een grijs background-color, en ik heb het nodig om verticaal uit te breiden, afhankelijk van de hoogte van het browservenster van de gebruiker. Op dit moment de background-color eindigt bij het laatste stukje inhoud daarin div.

Ik heb geprobeerd height:100%, min-height:100%; enz.


1681
2017-10-15 21:18


oorsprong


antwoorden:


Er zijn een paar CSS3-meeteenheden genaamd:

Viewport-Percentage (of Viewport-Relative) Lengths

Wat zijn kijkport-percentage lengtes?

Uit de hierboven beschreven gekoppelde W3-Kandidaat-aanbeveling:

De lengte van het viewport-percentage is relatief ten opzichte van de grootte van het initiële bevattende blok. Wanneer de hoogte of breedte van het initiële bevattende blok wordt gewijzigd, worden ze dienovereenkomstig geschaald.

Deze eenheden zijn vh (kijkvensterhoogte), vw (breedte van de viewport), vmin (kijkvenster minimale lengte) en vmax (maximale kijklengte van de viewport).

Hoe kan dit worden gebruikt om een ​​verdeler de hoogte van de browser te laten vullen?

Voor deze vraag kunnen we gebruik maken van vh: 1vh is gelijk aan 1% van de hoogte van de viewport. Het is te zeggen, 100vh is gelijk aan de hoogte van het browservenster, ongeacht waar het element zich in de DOM-structuur bevindt:

HTML

<div></div>

CSS

div {
    height:100vh;
}

Dit is letterlijk alles wat nodig is. Hier is een JSFiddle-voorbeeld hiervan in gebruik.

Welke browsers ondersteunen deze nieuwe eenheden?

Dit wordt momenteel ondersteund op alle bijgewerkte belangrijke browsers, behalve Opera Mini. Uitchecken Kan ik gebruiken... voor verdere ondersteuning.

Hoe kan dit met meerdere kolommen worden gebruikt?

In het geval van de vraag, met een linker en een rechter divider, is dit een JSFiddle-voorbeeld een twee kolommen tellende lay-out weergeven met beide vh en vw.

Hoe is 100vh anders dan 100%?

Neem deze lay-out bijvoorbeeld:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

De p tag hier is ingesteld op 100% hoogte, maar omdat het bevat div heeft 200px hoogte, 100% van 200px wordt 200px, niet 100% van de body hoogte. Gebruik makend van 100vh in plaats daarvan betekent dat het p tag zal 100% hoogte zijn van de body ongeacht de div hoogte. Kijk hier eens even naar bij JSFiddle om het verschil gemakkelijk te zien!


2364
2018-05-30 13:33



Als u de hoogte van een wilt instellen <div> of een element, stel de hoogte in van <body> en <html> tot 100% ook. Dan kun je de hoogte van het element instellen met 100% :)

Hier is een voorbeeld:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

520
2017-12-11 13:10



Als je je elementen absoluut kunt positioneren,

position: absolute;
top: 0;
bottom: 0;

zou het doen.


242
2017-10-15 21:31



U kunt de view-port-eenheid gebruiken in CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/
}

127
2018-05-04 11:11



Alle andere oplossingen, waaronder de bestverkopende vh zijn suboptimaal in vergelijking met de flex model oplossing.

Met de komst van de CSS flex-model, het oplossen van het 100% -hoogteprobleem wordt heel, heel eenvoudig: gebruik height: 100%; display: flexop de ouder, en flex: 1 op de onderliggende elementen. Ze nemen automatisch alle beschikbare ruimte in hun container in.

Merk op hoe eenvoudig de markup en de CSS zijn. Geen tafelhacks of zoiets.

Het flexmodel is ondersteund door alle belangrijke browsers evenals IE11 +.

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

Meer informatie over de flex model hier.


85
2018-06-12 14:14



Je vermeldt niet een paar belangrijke details zoals:

  • Is de indeling vaste breedte?
  • Zijn een of beide kolommen vaste breedte?

Hier is een mogelijkheid:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

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

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

Er zijn veel variaties op dit afhankelijk van welke kolommen moeten worden opgelost en die vloeibaar zijn. Je kunt dit ook met absolute positionering doen, maar ik heb over het algemeen betere resultaten gevonden (met name in termen van cross-browser) met behulp van drijvers.


47
2017-10-15 23:13



Je kunt gebruiken vh in dit geval dat relatief is aan 1% van de hoogte van de viewport.

Dat betekent dat als je de hoogte wilt afleggen, je het gewoon gebruikt 100vh.

Kijk naar de afbeelding die ik hier voor je teken:

How to make a div 100% height of the browser window?

Probeer het fragment dat ik voor u heb gemaakt zoals hieronder:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>


40
2018-06-03 17:43



Hier is een oplossing voor de hoogte.

Gebruik in uw CSS:

#your-object: height: 100vh;

Voor browsers die geen ondersteuning bieden vh-units, gebruik modernizr.

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 tot slot deze functie om de hoogte van de viewport aan toe te voegen #your-object als de browser dit niet ondersteunt vh-units:

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

25
2017-08-21 16:57



Dit is wat voor mij werkte:

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

Gebruik position:fixed in plaats van position:absolute, op die manier, zelfs als u naar beneden scrolt, zal de divisie uitklappen tot het einde van het scherm.


24
2017-07-27 16:18



Toevoegen min-height: 100% en geef geen hoogte op (of zet hem op automatisch). Het deed het werk voor mij helemaal goed:

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

14
2017-12-10 21:34