Bootstrap altezza al 100% con barra di navigazione

Questo è fondamentalmente ciò che voglio raggiungere:Bootstrap altezza al 100% con barra di navigazione

Example

voglio pagina totale da 100 altezza%, ma quando ho messo la barra laterale e il corpo al 100%, la pagina aggiunge il 40px dalla barra di navigazione, quindi ottengo una barra di scorrimento anche quando non ce ne dovrebbe essere una.

ho preso risolto utilizzando le tabelle, ma sono sicuro che ci deve essere un modo più semplice

<body> 
    <div class="container-fluid"> 
     <div class="navbar"></div> 
     <div class="sidebar"></div> 
     <div class="body"></div> 
    </div> 
</body>

e css quello che ho finora:

body, html, .container-fluid, .sidebar, .body { 
    height: 100%; 
    min-height: 100%; 
} 
.navbar { 
    height: 40px; 
    position: relative; 
}

fonte

2013-07-01 user2538584

Dovrete sottrarre l'altezza della barra di navigazione del 100%. Ci sono diverse soluzioni, molte delle quali includeranno JavaScript ma non ne avrai bisogno.

1: box-sizing

Dare navbar una posizione assoluta. Quindi hai il problema del contenuto degli altri elementi che scompaiono sotto di esso. Quindi arriva il trucco successivo, aggiungi un riempimento superiore alla dimensione della barra di navigazione. E l'ultimo trucco, aggiungere box-sizing: border-box; il .sidebar e .body. Per una migliore supporto del browser è necessario anche prefissi -moz- e -webkit- in questo modo: -moz-box-sizing:

Esempio: Fiddle to box-sizing

2: In realtà Sottrarre.

uso .body, .sidebar{ height: calc(100% - 40px); supporto Browser è ~~molto minimale per questo da quello che so~~ meno che per box-dimensionamento, quindi mi sento di raccomandare la prima soluzione. Calc explained on css-tricks

3: Flexbox (aggiunto anno 2015)

Ora dovrebbe probabilmente andare con l'utilizzo di calc quando si conosce l'altezza, ma un sostituto impressionante per l'utilizzo di tabelle è FlexBox. Questo è davvero il mio salvatore per progetti complessi in siti Web reattivi. Usando una delle migliori caratteristiche - flex-shrink: 0 - nell'intestazione è possibile forzare altri elementi a regolare se stessi per riempire il resto del contenitore.

Una risposta vecchia non è probabilmente il posto migliore di scrivere una guida estesa sulla FlexBox così, ancora una volta, un grande collegamento per css-tricks

fonte

2013-07-01 10:34:03

In termini di supporto' calc() ', in realtà è [sorprendentemente buono] (http://caniuse.com/#feat=calc). Avevo anche l'impressione che il supporto fosse quasi inesistente – Bojangles

Grazie, ho modificato la mia risposta con quella conoscenza. Purtroppo IE8 ha ancora una quota di mercato decente. Avrei dovuto saperlo, ho controllato prima quella pagina di cani. La mia mente probabilmente l'ha interpretato come -non usare per il proprio progetto, quindi non supportato- –

Grazie mille !!! – user2538584

Probabilmente perché sta aggiungendo il margine predefinito dalla barra di navigazione. Prova questo:

.navbar { 
    height: 40px; 
    position: relative; 
    margin: 0; 
    padding: 0; 
}

Inoltre, provare a cambiare il min max altezza:

max-height: 100% !important;

fonte

2013-07-01 10:21:20

Ma allora la pagina è ancora mi dà una barra di scorrimento 40px, perché la barra laterale e div corpo sono l'altezza al 100%, e la barra di navigazione è altezza 40px, che è 100% + 40px – user2538584

@ user2538584 Controllare la modifica. Controlla se funziona. –

'.navbar { altezza riga: 50 px; margine: 0; padding: 0; } 'sta funzionando per me – sky91

-1

cambio un litle il codice con l'aggiunta di un contenitore intorno alla vostra barra laterale e il corpo classe:

Ecco l'Css RESULT

body, html, .container-fluid, .sidebar, .body { 
    height: 100%; 
    min-height: 100%; 
} 

#container{ 
    width:100%; 
    height:100%; 
} 


.sidebar{ 
    background-color: green; 
    width:10%; 
    float:left; 
    height:100%; 

} 

.body{ 
    background-color: orange; 
    float:left; 
    width:90%; 
    height:100%; 

} 

.navbar { 
    height: 40px; 
    position: relative; 
    background-color: yellow; 
    width:100%; 
}

HTML

<div class="container-fluid"> 
    <div class="navbar"> 
     navbar 
    </div> 
    <div id="container"> 
     <div class="sidebar"> 
      sidebar 
     </div> 
     <div class="body"> 
      body 
     </div> 
     </div> 
</div> 

</body>

fonte

2013-07-01 10:34:12 Romain

Grazie, ma poi ho ancora una scrollbar 40px – user2538584

Bootstrap altezza al 100% con barra di navigazione

risposta

Problemi correlati