wake-up-neo.net

Stellen Sie die div-Höhe der Bildschirmgröße ein

Ich habe ein div-Element in Twitter-Bootstrap, dessen Inhalt vertikal außerhalb des Bildschirms überlaufen wird.

Ich möchte, dass das div die Höhe des Browserfensters einnimmt und den Rest des Inhalts vertikal innerhalb des Fensters scrollen lässt.

Ich habe ein Beispiel, das nicht funktioniert @ 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>

Ich poste diese Frage, nachdem ich sie gelesen habe, also Fragen wie SO Fragen

EDIT--

Sorry Jungs, ich glaube, ich habe meine Frage falsch verstanden.

Was ich möchte, ist, dass mein div den Rest des vertikalen Raums auf dem Bildschirm ausfüllen muss.

Es wäre toll, wenn jemand eine responsive Lösung vorschlagen könnte

26

Die Verwendung von CSS {height: 100%;} stimmt mit der Höhe des übergeordneten Elements überein. Dies kann alles sein, dh kleiner oder größer als der Bildschirm. {height: 100vh;} stimmt mit der Höhe des Ansichtsfensters überein.

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

Laut Mozillas offiziellen Dokumenten ist 1vh:

Entspricht 1% der Höhe des anfänglichen enthaltenden Blocks des Ansichtsfensters.

41

Sie müssen auch height für das übergeordnete Element angeben! Schauen Sie sich diese Geige an.

CSS:

html, body {height: 100%;}

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

JavaScript (mit jQuery) Weg:

$(document).ready(function(){
    $(window).resize(function(){
        $(".fullheight").height($(document).height());
    });
});

versuche dies 

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

benutzen 

  $ (Dokument) .height ()
Eigenschaft und setze auf das div aus Skript und set 

   Überlauf = Auto 

zum Scrollen

1
Aravind

Das hat für mich funktioniert 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);
}

Kasse JsFiddle link JsFiddle

0
Chaudhari Akash