Wie Fuß am Ende der Seite bleiben?

CSSWie Fuß am Ende der Seite bleiben?

* { 
    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>

Bitte helfen Sie mir, ich bin nicht in der Lage Fußzeile am Ende der Seite
einzustellen, wenn Körper Inhalte weniger Fußzeile sind, werden verschoben nach oben und min-height: 550px in #bodyDiv schafft Problem in verschiedenen Bildschirmauflösungen

Quelle

2013-07-22 Arvind Jhajhria

Bestmögliche Lösung http://www.cssstickyfooter.com/ – designtocode

Check sticky Footer: http: //ryanfait.com/sticky-footer/ – acudars

Ryan fait's Sticky Footer ist bei weitem der beste Weg, es zu tun. –

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; 
    }

Quelle

2013-07-22 09:30:09

Divya Ich möchte nicht sticky footer, einfach wollen Fußzeile am unteren Rand des Browser-Fensters, wenn Inhalte auf der Seite sind weniger. Vielen Dank für Ihre Hilfe –

Hier ist das Beispiel, was Sie brauchen: http://jsfiddle.net/ELUGc/ und http://jsfiddle.net/ELUGc/1/ Wenn Sie irgendwelche Fragen haben, lassen Sie es mich wissen. –

Ich schätze Ihre Antwort, aber ich habe das oben erwähnte HTML-Layout verwendet und für mich ist es nicht möglich, es zu ändern. Könnten Sie bitte meinen oben angegebenen Code und CSS ändern, so dass es funktioniert. –

#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; 
}

Quelle

2013-07-22 09:31:34

Sorry, funktioniert nicht richtig –

Sorry für die Arbeit Sie versuchen, es funktioniert an meinem Ende. Siehe Antwort ich habe es geändert. –

Versuchen Sie folgendes:

#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; 
}

Quelle

2013-07-22 09:31:48

Fußzeile wird am unteren Rand festgelegt, aber Körper Inhalt Höhe ist nicht 100 % –

machen Höhe von 'Wrapper' und' bodyWrapper' 100% ('Höhe: 100%;') –

Funktioniert das? –

Wie Fuß am Ende der Seite bleiben?

Antwort

Verwandte Themen