1. 首頁
  2. 問答
  3. 如何讓我的頁腳粘到底部？

如何讓我的頁腳粘到底部？

2017-04-15 66 views
1

我怎樣才能讓我的頁腳幾乎沒有內容粘到頁面底部？如何讓我的頁腳粘到底部？

<footer> 
<hr> 
<p> &copy; 2017 Sindre Berge <p> 
</footer>

來源

2017-04-15 Sindre Berge

+0

http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web -page –

+0

請參閱官方示例https://getbootstrap.com/examples/sticky-footer/和http://getbootstrap.com/examples/sticky-footer-navbar/ –

回答

0

使用CSS：

<style> 
footer { 
    width:100%; 
    position: fixed; 
    bottom: 0px; 
    text-align: center; /* This line is not needed but centers your text */ 
    } 
</style> 

<footer> 
    <hr> 
    <p> &copy; 2017 Sindre Berge <p> 
</footer>

看到它在行動，在這裏發揮它：https://www.w3schools.com/code/tryit.asp?filename=FEO78PICTTQP

或者嘗試通過Sam提出的柔性解決方案。這不會導致頁腳不總是在瀏覽器視圖的底部，而是在頁面的底部。

的Flex溶液：

.flex-container { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-direction: normal; 
 
    -moz-box-direction: normal; 
 
    -webkit-box-orient: horizontal; 
 
    -moz-box-orient: horizontal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: start; 
 
    -moz-box-pack: start; 
 
    -webkit-justify-content: flex-start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    -webkit-align-content: stretch; 
 
    -ms-flex-line-pack: stretch; 
 
    align-content: stretch; 
 
    -webkit-box-align: start; 
 
    -moz-box-align: start; 
 
    -webkit-align-items: flex-start; 
 
    -ms-flex-align: start; 
 
    align-items: flex-start; 
 
    /*I give height 700px but can be adapted to a body being 100%*/ 
 
    height:700px; 
 
    background:#cccccc; 
 
    } 
 

 
.flex-content { 
 
     -webkit-box-ordinal-group: 3; 
 
    -moz-box-ordinal-group: 3; 
 
    -webkit-order: 2; 
 
    -ms-flex-order: 2; 
 
    order: 2; 
 
    -webkit-box-flex: 0; 
 
    -moz-box-flex: 0; 
 
    -webkit-flex: 0 1 100%; 
 
    -ms-flex: 0 1 100%; 
 
    flex: 0 1 100%; 
 
    -webkit-align-self: flex-end; 
 
    -ms-flex-item-align: end; 
 
    align-self: flex-end; 
 
    background:#ca33aa; 
 
    height:100px; 
 
    }
<div class="flex-container"> 
 
    <div class="flex-content"> 
 
This is my footer 
 
    </div> 
 
    </div>

來源

2017-04-15 19:35:58

+0

不要將你的z-index設置爲999. https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ –

+0

嗨，讓我編輯添加flex解決方案，然後我刪除我的答案。我不介意優點，但我認爲它完成了以後用戶的信息。乾杯。 – Sam

1

在CSS：

footer{ 
    position:fixed; 
    bottom:0; 
    text-align: center; 
    width: 100%; 
}

，或者你可以內嵌它：

<footer style="position:fixed; bottom:0; text-align: center; width: 100%;"> 
<hr> 
<p> &copy; 2017 Sindre Berge <p> 
</footer>

來源

2017-04-15 19:31:05

+0

Okey都做了我想要的，但它不再居中我有頁腳p {text-align：center; } –

+0

我已經更新了我的答案，包括文本的居中，就像以前一樣。 –

0

我個人喜歡用

footer{ 
    position:absolute; 
    bottom:0; 
    width: 99%; 
}

因爲我發現，有時網站將會失控 - 尤其是width就這一點而言，儘管所有的東西都很好地貼合在屏幕上，但我自己有時會被底部的討厭的水平滾動條所迎接。

來源

2017-04-15 19:35:24

+1

您可能想要了解爲什麼您的頁面在您不需要時添加滾動條而不是簡單地任意更改寬度。 –

+0

它只是純粹的HTML和CSS，而不是一個腳本。 –

+0

這並不令我感到驚訝，也許你已經有一些邊距，填充或邊框的某處，寬度爲100％或100％左右的元素。 –

0

塊溶液：

footer { 
display:block; 
position:fixed; 
bottom:0; 
}

的Flex溶液：

.flex-container { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-direction: normal; 
 
    -moz-box-direction: normal; 
 
    -webkit-box-orient: horizontal; 
 
    -moz-box-orient: horizontal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: start; 
 
    -moz-box-pack: start; 
 
    -webkit-justify-content: flex-start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    -webkit-align-content: stretch; 
 
    -ms-flex-line-pack: stretch; 
 
    align-content: stretch; 
 
    -webkit-box-align: start; 
 
    -moz-box-align: start; 
 
    -webkit-align-items: flex-start; 
 
    -ms-flex-align: start; 
 
    align-items: flex-start; 
 
    /*I give height 700px but can be adapted to a body being 100%*/ 
 
    height:700px; 
 
    background:#cccccc; 
 
    } 
 

 
.flex-content { 
 
     -webkit-box-ordinal-group: 3; 
 
    -moz-box-ordinal-group: 3; 
 
    -webkit-order: 2; 
 
    -ms-flex-order: 2; 
 
    order: 2; 
 
    -webkit-box-flex: 0; 
 
    -moz-box-flex: 0; 
 
    -webkit-flex: 0 1 100%; 
 
    -ms-flex: 0 1 100%; 
 
    flex: 0 1 100%; 
 
    -webkit-align-self: flex-end; 
 
    -ms-flex-item-align: end; 
 
    align-self: flex-end; 
 
    background:#ca33aa; 
 
    height:100px; 
 
    }
<div class="flex-container"> 
 
    <div class="flex-content"> 
 
This is my footer 
 
    </div> 
 
    </div>

來源

2017-04-15 19:53:38 Sam

相關問題

 相關問題