Staram się korzystać z tej lepkiej stopkę:Używanie schematu flexbox lepką stopkę z bootstrap
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content{
flex: 1;
}
Ale bałagan renderowania podczas < 768px szerokości.
Jakąkolwiek prostą poprawkę css, aby działała we wszystkich rozdzielczościach?
Trzeba dać artykuł schematu flexbox width z 100%.
W tym przypadku byłoby to .content elementem:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
@media only screen and (max-width: 768px) {
.content {
width: 100%;
}
}
Bootstrap 4 teraz używa schematu flexbox domyślnie więc łatwiej jest uzyskać lepki (nie stała) stopkę w/o dodatkowy CSS dla flexbox. Musisz tylko upewnić się, że ciało ma min-height ...
body {
min-height: 100vh;
}
Następnie użyć klas użytkowych schematu flexbox ...
<body class="d-flex flex-column">
<nav></nav>
<main class="flex-grow"></main>
</footer></footer>
</body>
Cool, myślę, że lepiej byłoby zastosować to w maksymalna szerokość: 768 pikseli. http://jsfiddle.net/2xvv5mod/1/ – tachyonflux
@karaokyo Och, dobra uwaga. Nie wiedziałem, że używasz Bootstrapa, mimo że mówiłeś, że jesteś. –
Tak naprawdę skończyło się na 'max-width: 100%' – tachyonflux