Ho una pagina con un div esterno che include un'intestazione, un contenuto e un piè di pagina. Voglio che div il piè di pagina per abbracciare la parte inferiore del browser, anche quando il div di contenuto non è abbastanza alto per riempire l'area visibile (cioè non c'è scorrimento).Come spingere un piè di pagina nella parte inferiore della pagina quando il contenuto è breve o mancante?
Esempio: http://jsfiddle.net/AU6yD/
html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}
body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }<div id="wrapper">
<div id="header">
Header
</div>
<div id="push"></div>
</div>
<div id="bottom">
<div id="footer">
Footer
</div>
</div>Prova utilizzando
position:absolute;
bottom:0;
è risolto il mio problema.
Quello che volevo era avere il footer nella parte inferiore della visualizzazione del browser SOLO SE il contenuto non era abbastanza lungo da riempire la finestra del browser (non appiccicoso).
Sono stato in grado di ottenere utilizzando la funzione CSS calc(). Che è supportato da tutti i browser moderni. È possibile utilizzare come:
<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>
il css:
.container
{
min-height: 70%;
min-height: -webkit-calc(100% - 186px);
min-height: -moz-calc(100% - 186px);
min-height: calc(100% - 186px);
}
Change 186 alle dimensioni del vostro piè di pagina.
ho provato: http://jsfiddle.net/AU6yD/ come qui è l'opzione migliore, ma ho avuto problemi quando il contenuto del <div id="wrapper"> cominciò a diventare troppo grande vedere evidence.png, quello che ho fatto per risolvere questo stato piacevole l'ogni dimensione del corpo Ho cambiato il contenuto della che div come questo:
var body = document.body,
html = document.documentElement;
body.style.height = 100 + "%";
setTimeout(function(){
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight,
html.offsetHeight);
body.style.height = height + "px";
}, 500);
prova con questo codepen.io/dendii/pen/LLPKJm mezzi reattivi
html, body {
color:#fff;
}
.wrapper{
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
}
.main{
width:100%;
overflow:hidden;
}
.main-inner {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
article,aside{
float:left;
padding:20px 10px;
}
article{
width:70%;
background:darkred;
}
aside{
width:30%;
background:darkblue;
}
.top {
padding:20px 10px;
height:100%;
background:darkgreen;
}
.bottom,.text-mid {
padding:20px 10px;
height:100%;
background:darkorange;
}
.text-mid {
margin-top: auto;
background:darkgrey;
}
@media (max-width: 768px){
.main-inner{
display: block;
}
article,aside{
width:100%;
float:none;
display: block;
}
}<div class="wrapper">
<header class="top">
<h1>Header</h1>
</header>
<div class="main"><div class="main-inner">
<article>
blank content
</article>
<aside>
class sidebar
</aside>
</div></div>
<div class="text-mid">
<div class="center">
Whatever you want to keep.
</div>
</div>
<footer class="bottom">
<div class="footer">
Footer
</div>
</footer>
</div>Un'altra alternativa, se si desidera un main-wrapper per regolare lo schermo EqualHeight
Non funziona per IE-11 (( –
Per farlo funzionare responsively quando il piè di pagina è più alto sui dispositivi mobili confrontare con il desktop, non si può davvero conoscere l'altezza footer . Un modo per farlo è allungare il footer per coprire l'intero schermo.
html,
body {
height: 100%;
}
.container {
min-height: 80%;
background-color: #f3f3f3;
}
.footer {
background-color: #cccccc;
box-shadow: 0px 500px 0px 500px #cccccc;
}<div class="container">Main content</div>
<div class="footer">Footer</div>questo è quello che sto facendo per la mia pagina
<h6 style="position:absolute; bottom:0;">This is footer at bottom of page without scrollbars</h6>Ho provato questo e funziona bene finora
position:absolute;
bottom:0;
width:100%;
o
position:absolute;
bottom:0;
left:0;
right:0;
Ho risolto lo stesso problema con jQuery
var windowHeiht = $(window).height();
var footerPosition = $("#asd-footer").position()['top'];
if (windowHeiht > footerPosition) {
$("#asd-footer").css("position", "absolute");
$("#asd-footer").css("bottom", "0");
$("#asd-footer").css("width", "100%");
}
rielaborazione la soluzione jQuery. Ci sto lavorando con il ridimensionamento della finestra. Quando la finestra è più grande della pagina, la posizione dello stile del footer è "assoluta" fissata nella parte inferiore della finestra. Quando la finestra è più piccola della pagina, il piè di pagina rimane nella parte inferiore della pagina - scorrendo verso il basso.
<style>
.FooterBottom {
width:100%;
bottom: 0;
position: absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
FooterPosition();
$(window).resize(function() {
FooterPosition();
});
});
var originalFooterBottom = 0;
function FooterPosition() {
var windowHeight = $(window).height();
if (originalFooterBottom == 0) {
var footer = $("#Footer");
originalFooterBottom = footer.position()['top'] + footer.height();
}
if (windowHeight > originalFooterBottom) {
var footerElement = document.getElementById("Footer");
if (!footerElement.classList.contains('FooterBottom')) {
footerElement.classList.add('FooterBottom');
}
}
else {
var footerElement = document.getElementById("Footer");
if (footerElement.classList.contains('FooterBottom')) {
footerElement.classList.remove('FooterBottom');
}
}
}
</script>Ho provato molte soluzioni solo stile ma nessuno di loro ha funzionato. Questa soluzione Javascript/stile funziona perfettamente per me, anche con il suo strano mix di jQuery e GetElement.
Grazie ad Asad per il suo post.
Quindi il tuo piè di pagina coprirà il tuo contenuto reattivo. – Niing