Come mantenere il piè di pagina in fondo alla pagina?

CSSCome mantenere il piè di pagina in fondo alla pagina?

* { 
    margin: 0px; 
    padding: 0px; 
} 
html { 
    margin: 0px; 
    padding: 0px; 
} 
body { 
    line-height: 1; 
    margin: 0px; 
    padding:0px; 
    background:url("../images/22.jpg") scroll center top #16202C; 
    /* box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; 
    -webkit-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; 
    -moz-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; 
-o-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; */ 
    color: #464646; 
    font: 13px/17px arial, sans-serif; 
    min-width: 1300px; 
} 
#wrapper { 
    margin: 0px; 
} 
#header { 
    height: 40px; 
    width: 100%; 
} 
#bodyWrapper { 
    width: 980px; 
    margin: 0px auto; 
    position: relative; 
    z-index: 2; 
    -webkit-box-shadow: 0px 0px 2px #000 outset; 
    -moz-box-shadow: 2px 0px 2px #000 outset; 
    box-shadow: 20px 0px 2px #000 outset; 
} 
#bodyDiv { 
    min-height: 550px; 
    height: 100%; 
    background:#fff; 
    padding:20px 10px; 
} 
#footer { 
    background: url("../images/footer_back.png") repeat-x scroll left top transparent; 
    height: 100px; 
    margin-top: -50px; 
    position: relative; 
    width: 100%; 
    z-index: 1; 
}

HTML

<body> 
    <div id="topHeaderBar"></div> 
    <div id="wrapper"> 
     <div id="bodyWrapper"> 
      <div id="header"> 
       <jsp:include page="menu.jsp"></jsp:include> 
      </div> 
      <div id="bodyDiv" style="position: relative;">body content</div> 
      <div id="footer"> 
       <jsp:include page="footer.jsp"></jsp:include> 
      </div> 
     </div> 
</body>

Si prega di darmi una mano, io non sono in grado di regolare piè di pagina in fondo alla pagina
quando il contenuto del corpo sono meno piè di pagina verrà spostata verso l'alto e min-altezza: 550px in #bodyDiv crea problemi in diverse risoluzioni dello schermo

fonte

2013-07-22 Arvind Jhajhria

migliore soluzione possibile http://www.cssstickyfooter.com/ – designtocode

controllo piè di pagina appiccicoso: http: //ryanfait.com/sticky-footer/ – acudars

Il footer sticky di Ryan fait è di gran lunga il modo migliore per farlo. –

HTML

<div id="topHeaderBar"></div> 
     <div id="wrapper"> 
      <div id="bodyWrapper"> 
       <div id="header"> 
        <jsp:include page="menu.jsp"></jsp:include> 
       </div> 
       <div id="bodyDiv" style="position: relative;">body content</div> 
       <div id="footer"> 
        <jsp:include page="footer.jsp"></jsp:include> 
       </div> 
      </div>

CSS:

html,body{ 
     height: 100% 
    } 

    #header{ 
     background-color: yellow; 
     height: 100px; 
     width: 100%; 
    } 

    #holder { 
     min-height: 100%; 
     position:relative; 
    } 

    #body { 
     padding-bottom: 100px; 
    } 

    #footer{ 
     background-color: lime; 
     bottom: 0; 
     height: 100px; 
     left: 0; 
     position: absolute; 
     right: 0; 
    }

fonte

2013-07-22 09:30:09

Divya non voglio il piè di pagina appiccicoso, voglio semplicemente impostare il piè di pagina nella parte inferiore della finestra del browser quando il contenuto della pagina è inferiore. Grazie per il tuo aiuto –

Ecco l'esempio di ciò che ti serve: http://jsfiddle.net/ELUGc/ e http://jsfiddle.net/ELUGc/1/ se hai qualche domanda fammelo sapere. –

Apprezzo la tua risposta, ma ho usato il layout html sopra menzionato e per me non è possibile cambiarlo. Potresti modificare il mio codice e il mio css sopra indicati, in modo che funzioni. –

#footer { 
    background: url("../images/footer_back.png") repeat-x scroll left top transparent; 
    height: 100px; 
    margin-top: -50px; 
    position: absolute; 
    width: 100%; 
    z-index: 1; 
    clear:both; 
}

fonte

2013-07-22 09:31:34

scusa, non funziona correttamente –

Mi spiace per farti lavorare Prova questo funziona alla mia estremità Vedi risposta l'ho modificato –

Prova questo:

#footer { 
    background: url("../images/footer_back.png") repeat-x scroll left top transparent; 
    height: 100px; 
    margin-top: -50px; 
    position: fixed; 
    bottom:0; 
    width: 100%; 
    z-index: 1; 
}

fonte

2013-07-22 09:31:48

il piè di pagina verrà impostato in basso ma l'altezza del contenuto del corpo non è 100 % –

altezza di 'wrapper' e' bodyWrapper' 100% ('altezza: 100%;') –

Funziona? –

Come mantenere il piè di pagina in fondo alla pagina?

risposta

Problemi correlati