CSS粘滯頁腳失敗

我試圖讓置頂頁腳的工作，並已嘗試目前下面的CSS：CSS粘滯頁腳失敗

#footer { 
     width:920px; 
     height:208px; 
     font-size:10px; 
     margin-left:auto; 
     margin-right:auto; 
     background-image:url(images/grad.png); 
     background-repeat:repeat-y; 
     padding:0 20px; 
     clear:both; 
     position:relative; 
     margin-top:-208px; 
} 

body { 
     margin:0; 
     font-family:Arial, Helvetica, sans-serif; 
     font-size:13px; 
     color:#333333; 
     background-repeat:repeat-x; 
     padding: 0; 
     height: 100%; 
} 

#wrap { 
     width:960px; 
     margin:0 auto; 
     min-height:100%; 
     height: 100%; 
} 


    #content { 
     width:892px; 
     float:left; 
     border-left:4px solid white; 
     border-right:4px solid white; 
     padding:15px 0px 15px 20px; 
     background-image:url(images/sidebar_bg.png); 
     position:relative; 
     padding-bottom:143px; 
    }

我不得不減少＃內容填充底部，所以它會適合。但我仍然有問題。首先，有一個在較長頁面的底部空間太大（見 - http://bellbird.redgraphic.co.uk/headteacher/）其次，較短的網頁時調整瀏覽器窗口犯規滾動頁腳（見 - http://bellbird.redgraphic.co.uk/school-council/）

置頂頁腳似乎總是一個問題，所以我必須錯過一個竅門。

任何幫助將不勝感激。

劉易斯

來源

2013-05-08 LCDesign Cambridge

use postion：fixed and bottom：0;爲你的css – 2013-05-08 12:21:13

usefull link here.這一個幫助我同樣的問題。

CSS加價：

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
}

HTML標記：

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div>

來源

2013-05-08 12:12:59 DiederikEEn

我認爲'位置：絕對'始終保持頁腳底部！當您調整窗口大小時會出現許多問題。 – 2013-05-08 12:18:33

@Sarfaraz ...你有這樣的例子嗎？ – DiederikEEn 2013-05-08 12:20:33

我嘗試了很多次，當我使網站和滾動條可見時，它將無法正常工作，當你調整窗口的'footer總是上升，根據給位置和我該死的肯定關於它 – 2013-05-08 12:22:04

使用這個CSS，而不是你

#footer { 
    position:fixed; 
    bottom:0; 
    left:0; 
    right:0; 
    height:40px; /* Height of the footer */ 
    background:#6cf; 
}

來源

2013-05-08 12:15:39

HTML：

<div class="wrap"> 
    <div class="inner-wrap"> 
    ... 
    </div> 
</div> 
<footer> 
... 
</footer>

css：

html, body {height:100%;} 
.wrap {min-height:100%; height:auto !important; margin-bottom:-100px;} 
.inner-wrap {padding-bottom:100px;} 
footer {height:100px;}

來源

2013-08-13 16:06:49 peterchon

CSS粘滯頁腳失敗

回答

相關問題