Sto cercando di utilizzare questo piè di pagina appiccicoso:Utilizzando FlexBox piè di pagina appiccicoso con bootstrap
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content{
flex: 1;
}
Ma si scombina il rendering ai < 768px larghezze.
Qualsiasi semplice correzione CSS per farlo funzionare per tutte le risoluzioni?
È necessario dare la voce FlexBox un width di 100%.
In questo caso, sarebbe che .content elemento:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
@media only screen and (max-width: 768px) {
.content {
width: 100%;
}
}
Bootstrap 4 ora utilizza FlexBox di default in modo che sia più facile per ottenere un appiccicoso (non fisso) footer w/o CSS aggiuntivo per la flexbox. Hai solo bisogno di assicurarsi che il corpo ha min-height ...
body {
min-height: 100vh;
}
Quindi utilizzare le classi di utilità FlexBox ...
<body class="d-flex flex-column">
<nav></nav>
<main class="flex-grow"></main>
</footer></footer>
</body>
fredda, penso che sarebbe meglio applicare questo a larghezza massima: 768 px. http://jsfiddle.net/2xvv5mod/1/ – tachyonflux
@karaokyo Oh, buon punto. Non avevo capito che stavi usando Bootstrap anche se avevi detto che lo eri. –
In realtà ho finito con 'max-width: 100%' – tachyonflux