MODIFICARE: Sembra che Fiddle non stia caricando correttamente Bootstrap di Twitter, quindi ti suggerisco di copiare il mio codice HTML e CSS in un file .html vuoto sul desktop e risolvere il problema con quel file. Ricorda di includere correttamente Bootstrap 3 di Twitter (il CDN è nel mio codice HTML di seguito) perché il problema appare solo quando Bootstrap è incluso.
Ecco il mio violino / codice: http://jsfiddle.net/maLog1sm/
Ed ecco il codice che si trova nel violino:
HTML:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<div class="container-fluid headerRow">
<div class="row headerRow">
<div class="col-md-12 navContainer">
<ul class="nav nav-pills nav-stacked custom-nav-pills">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
<li><a href="#"> Portfolio</a></li>
</ul>
</div>
<div class="col-md-10 bodyColumn">
<div class="footer"><p>Footer</p></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
}
.bodyColumn {
height: 100%;
overflow: auto;
}
.headerRow {
height: 100%;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0%;
}
Usa bootstrap 3. Mi chiedo perché la barra di scorrimento verticale sia presente e come posso rimuoverla (sul violino, la barra di scorrimento appare se la finestra del browser è ridotta o meno, ma sul mio sito Web effettivo, appare solo quando la finestra è ridotta. ristretto, intendo quando rendo la larghezza della finestra del browser più piccola della sua larghezza massima).
risposte:
3 per risposta № 1Problema con il tuo codice sei tu che stai dandoaltezza 100% su HTML e BODY, va bene nessun problema. Inoltre hai dato la stessa altezza: 100% alle 2 classi (due div) al suo interno, ora HTML non può dare il 100% a entrambe le div interne. Puoi menziona altezza: auto alla classe che regolerà l'altezza secondo il contenuto disponibile.
Qui prova a sostituire l'altezza: 100% in altezza: auto; per la classe .bodyColumn, risolverà il tuo problema
CSS : Aggiornato
.bodyColumn {
position:absolute !important;
bottom:0%;
height: auto;
overflow: auto;
}
.headerRow {
height: 100%;
overflow: auto;
}
.footer {
display:block;
}
DEMO : aggiornato
Spiegazione: Qui la prima intestazione divRow prende il tuttoaltezza (100% altezza) della pagina, ora per il corpo div La colonna è dopo quella sopra, quindi è troppo alta al 100%, quindi è costretta a farlo ma il suo margine: 0 inizia da dove finisce il contenuto (ecco il tuo navContainer div)
1 per risposta № 2
Penso che il problema sia con le classi e gli stili definiti in HTML.
Nel caso precedente, stai avendo la classe headerRowgenitore e uno dei suoi figli. E un altro bambino sta avendo la classe bodyColumn. Entrambi gli elementi che hanno uno stile di altezza pari al 100% cercano di prendere il 100% dell'altezza del genitore e di essere traboccati come auto, il genitore scorrerà in caso di trabocco.
Ho provato a lavorare nel violino e rimuovere headerRow dall'elemento figlio risolve il problema.
1 per risposta № 3
Prova a cambiare il tuo height:100% proprietà in bodyColumn e headerRow a min-height:100% come questo:
.bodyColumn {
min-height: 100%;
overflow: auto;
}
.headerRow {
min-height: 100%;
overflow: auto;
}
Lascia l'altezza del tuo corpo come height:100% anche se. Non modificare l'altezza del genitore in altezza minima.