頁腳不會粘在底部

-1

我讀過很多文章和現有的問題在計算器上。我已經嘗試了10多種不同的代碼。它只是不起作用。頁腳不會粘在底部

我有一個網站，我希望頁腳能夠堅持在底部無論如何。我的意思是，平躺在底部。我不希望它隨瀏覽器窗口的高度移動。我希望它保持在所有現有的div下面。

當前頁腳位於頁面底部。但它隨着瀏覽器窗口的高度而移動。所以，如果我最小化瀏覽器，頁腳會隨着瀏覽器的高度向上移動。我不要那個。

我試了很多，但它不起作用。這是我當前的代碼：

body{ 
background-image: url('../images/bg.png'); 
background-repeat: repeat; 
margin: 0px; 
padding: 0px; 
} 

body, html{ 
    height: 100%; 
} 

#body{ 
width: 1024px; 
min-height: 100%; 
margin: 0 auto; 
} 

#footer{ 
clear:both; 
min-height: 150px; 
width: 100%; 
background-image: url('../images/footerbg.png'); 
background-repeat: repeat; 
}

身體標識是包裝。頁腳是體包裝外

<body> 
    <div id="body"> 
     <!-- HEADER --> 
     <div id="logo"></div> 
     <div id="menu"> 
      <ul id="hmenu"> 
      <!-- stuff --> 
      </ul> 
     </div> 

     <div id="page"> 
      <!-- stuff --> 
     </div> 
    </div> 

    <div id="footer"> 
    <!-- stuff --> 
    </div> 

    <div id="navigationbar"></div> 



    </body>

編輯：問題與「身體」的div裏面的div的人做。它正在使用絕對位置進行定位。有沒有什麼辦法可以使用Ryan Fait的方法正確粘貼頁腳，同時使用絕對位置？

編輯＃2：我忘了使用「clear：both」。解決它

來源

2014-09-23 stefan1294

你將不得不解釋爲什麼這是「不是答案」，因爲它似乎準確回答你的問題。 – 2014-09-23 18:07:24

兩個接受的答案（給這個問題和上面的鏈接的答案）是相同的。這怎麼可能不是重複的？請詳細說明。 – 2014-09-23 21:47:33

@HashemQolami Nevermind。即使在我編輯之後，我也同意你的看法。應該做一些更多的研究。 – stefan1294 2014-09-24 14:23:20

瑞安既成事實有一個解決的辦法：http://ryanfait.com/sticky-footer/

我修改了它稍微用SASS：

$footer-height: 250px; /* Set size of sticky footer in the variable: */ 

.main-wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto (-$footer-height); /* the bottom margin is the negative value of the footer's height */ 
} 
.push { 
    clear: both; 
    height: $footer-height; 
} 
.footer-wrapper { 
    clear: both; 
    min-height: $footer-height; 
    background: #E7E7E7; 
    padding: 50px 0; 
}

你可以取出變量香草CSS使用。

你的HTML會是這個樣子：

<div class="main-wrapper"> 
    <div class="wrapper"></div> 
    <div class="push"></div> 
</div> 
<div class="footer-wrapper"></div>

來源

2014-09-23 15:45:55

這是我經常使用它的最佳解決方案，但它不是來自Ryan fait ^^。無論如何。 – 2014-09-23 15:49:14

對於Ryan Fait解決方案而言，它非常好。 – Candlejack 2014-09-23 15:49:15

@StevenWave對不起，我只知道它作爲瑞安Fait的工作，如果你能提供給我的原作者我很樂意更新引用的代碼的來源:-) – 2014-09-23 15:51:34

修復DIV到瀏覽器，然後迫使其對底部並留下了0餘量。

#footer{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    clear:both; 
    min-height: 150px; 
    width: 100%; 
    background-image: url('../images/footerbg.png'); 
    background-repeat: repeat; 
}

如果你想在底部中間的DIV，創建寬度的容器：100％，然後讓頁腳包含「保證金：0汽車」

來源

2014-09-23 15:46:28 oliversarfas

我認爲你應該使用這個CSS對於頁腳：

#footer{ 
    position:fixed; 
    bottom:0; 
    background-image: url('../images/footerbg.png'); 
    background-repeat: repeat; 
}

like here。

來源

2014-09-23 15:46:50

所有你需要：

#footer{ 
    position: fixed; 
    bottom: 0; 
    /* rest of your styles */ 
}

此外，如果你不希望內容頁腳來隱藏：

#body { /* your main div has an id of body, not to be mistaken for body tag */ 
    padding-bottom: 150px /* height of footer */ 
}

演示http://jsfiddle.net/2mzak87o/

來源

2014-09-23 15:47:25 Arbel

試試這個：

#body { 
width: 1024px; 
min-height: 80%; 
margin: 0 auto; 
position: relative; 
} 

#footer { 
clear: both; 
min-height: 20%; 
width: 100%; 
background-image: url('../images/footerbg.png'); 
background-repeat: repeat; 
}

enter image description here

來源

2014-09-23 15:51:51

頁腳不會粘在底部

回答

相關問題