Domanda Imposta l'altezza div uguale alla dimensione dello schermo


Ho un elemento div in twitter-bootstrap che avrà un contenuto che si riverserà verticalmente fuori dallo schermo.

Vorrei che il div assuma l'altezza della dimensione della finestra del browser e che il resto del contenuto scorra verticalmente all'interno della finestra.

Ho un campione che non funziona @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>

Sto postando questa domanda dopo aver letto così domande come QUINDI domande

MODIFICARE--

Scusate ragazzi, credo di aver sbagliato la mia domanda.

Quello che vorrei è che il mio div debba riempire il resto dello spazio verticale sullo schermo.

Sarebbe bello se qualcuno potesse suggerire una soluzione reattiva


18
2017-08-29 06:40


origine


risposte:


Usando i CSS {height: 100%;} corrisponde all'altezza del genitore. Questo potrebbe essere qualsiasi cosa, cioè più piccolo o più grande dello schermo. utilizzando {height: 100vh;} corrisponde all'altezza della finestra.

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

Secondo Mozilla documenti ufficiali, 1vh è:

Uguale all'1% dell'altezza del blocco contenitore iniziale della vista.


23
2018-01-08 20:56



Devi dare height anche per l'elemento genitore! Dai un'occhiata a questo violino: http://jsfiddle.net/ntLpg/17/

CSS:

html, body {height: 100%;}

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

JavaScript (usando jQuery) Modo:

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

23
2017-08-29 06:46



prova questo

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

12
2017-08-29 06:48



uso

 $ (Document) .height ()
proprietà e impostato su div da script e set

  trabocco = auto 

per lo scorrimento


1
2017-08-29 06:44