web-dev-qa-db-fra.com

Définir une hauteur de div égale à la taille de l'écran

J'ai un élément div dans Twitter-bootstrap qui aura un contenu qui débordera verticalement en dehors de l'écran.

Je voudrais que la div prenne la hauteur de la taille de la fenêtre du navigateur et laisse le reste du contenu défiler verticalement dans la fenêtre.

J'ai un échantillon qui ne fonctionne pas @ jsFiddle

#content {
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">Side Bar</div>

        <div class="span9" id="content">
            Content Bar Example Content
        </div>
    </div>
</div>

Je poste cette question après avoir lu des questions telles que SO Questions

MODIFIER--

Désolé les gars, je suppose que j'ai mal compris ma question.

Ce que j'aimerais, c'est que ma div doit remplir le reste de l'espace vertical de l'écran.

Ce serait formidable si quelqu'un peut suggérer une solution adaptée

csshtmltwitter-bootstrapheightresponsive-design
26
Anand Sunderraman

L'utilisation de CSS {height: 100%;} correspond à la hauteur du parent. Cela pourrait être n'importe quoi, c'est-à-dire plus petit ou plus grand que l'écran. L'utilisation de {height: 100vh;} correspond à la hauteur de la fenêtre.

.container {
    height: 100vh;
    overflow: auto;
}

Selon documents officiels de Mozilla , 1vh est:

Égal à 1% de la hauteur du bloc contenant initial de la fenêtre.

41
Kurt Van den Branden

Vous devez aussi donner height pour l'élément parent! Découvrez ce violon .

CSS:

html, body {height: 100%;}

#content, .container-fluid, .span9
{
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}​

JavaScript (en utilisant jQuery) Way:

$(document).ready(function(){
    $(window).resize(function(){
        $(".fullheight").height($(document).height());
    });
});
25
Praveen Kumar Purushothaman

essaye ça 

$(document).ready(function(){
    $('#content').height($(window).height());
});
12
gaurang171

utilisation 

  $ (document) .height ()
propriété et mis à la div du script et mis 

   débordement = auto 

pour faire défiler

1
Aravind

Cela a fonctionné pour moi JsFiddle

Html

..bootstrap
<div class="row">
  <div class="col-4 window-full" style="background-color:green">
    First Col
  </div>
  <div class="col-8">
    Column-8
  </div>
</div>

css

.row {
   background: #f8f9fa;
   margin-top: 20px;
}

 .col {
   border: solid 1px #6c757d;
   padding: 10px;
}

JavaScript

var elements = document.getElementsByClassName('window-full');
var windowheight = window.innerHeight + "px";

fullheight(elements);
function fullheight(elements) {
    for(let el in elements){
        if(elements.hasOwnProperty(el)){
            elements[el].style.height = windowheight;
        }
    }
}

window.onresize = function(event){
     fullheight(elements);
}

Commander JSFiddle link JsFiddle

0
Chaudhari Akash