Jak zachować stopkę u dołu strony?

CSSJak zachować stopkę u dołu strony?

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

Proszę mi pomóc, nie jestem w stanie dostosować stopkę na dole strony
gdy zawartość ciała są mniej stopka zostanie przesunięty do góry i min-wysokość: 550px w #bodyDiv tworzy problem w różnych rozdzielczościach ekranu

Źródło

2013-07-22 Arvind Jhajhria

możliwe Najlepsze rozwiązanie http://www.cssstickyfooter.com/ – designtocode

check lepki stopka: http: //ryanfait.com/sticky-footer/ – acudars

Lepkie stopki Ryana faita są zdecydowanie najlepszym sposobem na zrobienie tego. –

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

Źródło

2013-07-22 09:30:09

Divya nie chcę lepkiej stopki, po prostu chcę ustawić stopkę w dolnej części okna przeglądarki, gdy zawartość na stronie jest mniejsza. Dziękujemy za pomoc –

Oto przykład, czego potrzebujesz: http://jsfiddle.net/ELUGc/ i http://jsfiddle.net/ELUGc/1/ jeśli masz jakieś pytanie daj mi znać. –

Doceniam twoją odpowiedź, ale użyłem powyższego układu html i dla mnie nie można go zmienić. Czy mógłbyś zmodyfikować mój powyższy kod i css, żeby działał. –

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

Źródło

2013-07-22 09:31:34

Przepraszam, nie działa prawidłowo –

Przepraszam, że Cię pracuję Wypróbuj to działa na moim końcu Zobacz odpowiedź Zmodyfikowałem to –

Spróbuj tego:

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

Źródło

2013-07-22 09:31:48

Stopka zostanie ustawiona na dole, ale wysokość treści ciała nie jest 100 % –

Zrobić wysokość 'opakowaniu' i' bodyWrapper' 100% ('wysokość: 100%;') –

Czy to działa? –

Jak zachować stopkę u dołu strony?

Odpowiedz

Powiązane problemy