如何將頁腳永久頁面放在頁底

-2

如何在我的頁腳內寫入並將其保留在頁面底部？如何將頁腳永久頁面放在頁底

.underbar { 
 
bottom:0; 
 
width:100%; 
 
height:60px; 
 
background:#000000; 
 
}

<footer class="underbar"> 
 

 
</footer>

來源

2016-09-29 Munksgaard

'位置：fixed'會幫助你。 –

嘗試，檢查我的代碼 –

我需要這樣的： http://matthewjamestaylor.com/blog/bottom-footer-demo.htm – Munksgaard

使用位置：固定屬性

.underbar { 
 
bottom:0; 
 
width:100%; 
 
height:60px; 
 
background:#000000; 
 
position:fixed; 
 
}

<footer class="underbar"> 
 

 
</footer>

來源

2016-09-29 10:32:21 Dhaarani

我都試過了，檢查可能是這將幫助ü

.underbar { 
 
bottom:0; 
 
width:100%; 
 
height:60px; 
 
    padding:0px; 
 
    margin:0px; 
 
background:#000000; 
 
    position:fixed; 
 
}

<footer class="underbar"> 
 

 
</footer>

來源

2016-09-29 10:32:44

爲什麼滾動出現@ Ganesh神Putta – Dhaarani

感謝u和我編輯的代碼， PLZ看看@Dhaarani –

@ Ganesh神Putta好 – Dhaarani

.underbar { 
bottom:0; 
width:100%; 
height:60px; 
background:#000000; 
position: fixed; 
}

添加屬性的位置是：固定;

來源

2016-09-29 10:33:26

我需要這樣的： HTTP：// matthewjamestaylor.com/blog/bottom-footer-demo.htm – Munksgaard

您可以在css中添加position屬性。

.underbar { 
position:fixed; 
bottom:0; 
width:100%; 
height:60px; 
background:#000000; 
}

而且您可以將您的文本放在頁腳標記內。

<footer class="underbar"> 
    Your text here 
</footer>

來源

2016-09-29 10:34:09 user5478656

我需要它是這樣的： http://matthewjamestaylor.com/blog/bottom-footer-demo.htm – Munksgaard

-1

首先將這些腳本添加到您的文檔。

<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    </head>

然後添加類「頁腳導航欄固定底」頁腳。這應該工作。

<footer class="footer navbar-fixed-bottom"> </footer>

來源

2016-09-29 10:35:45 SN3LLX

您可以使用以下方法：

position: fixed; 
right: 0; 
bottom: 0; 
left: 0;

，也將努力！

下面你會發現你的代碼jfiddle例如：

https://jsfiddle.net/2wqrg2zu/

來源

2016-09-29 10:37:42 lampropoi

我需要它是這樣的： http://matthewjamestaylor.com/blog/bottom-footer-demo.htm – Munksgaard

<style> 
 
      .underbar { 
 
       bottom:0; 
 
       width:100%; 
 
       height:60px; 
 
       background:#000000; 
 
       position: fixed; 
 
       } 
 
     </style>

<HTML> 
 
    <HEAD> 
 
      
 
    </HEAD> 
 
    <BODY> 
 
     <footer class="underbar"> 
 
     footer 
 
     </footer> 
 
    </BODY> 
 
</HTML>

來源

2016-09-29 10:46:45

檢查

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 
#header { 
 
    background: #ff0 none repeat scroll 0 0; 
 
    padding: 10px; 
 
} 
 
#body { 
 
    padding: 10px 10px 60px; 
 
} 
 
#footer { 
 
    background: #6cf none repeat scroll 0 0; 
 
    bottom: 0; 
 
    height: 60px; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
#header p, 
 
#header h1 { 
 
    margin: 0; 
 
    padding: 10px 0 0 10px; 
 
} 
 
#footer p { 
 
    margin: 0; 
 
    padding: 10px; 
 
}

<div id="container"> 
 
    <div id="header"> 
 
    <!-- Header start --> 
 
    <p><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" title="How to keep footers at the page bottom with valid CSS">« Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a> 
 
    </p> 
 
    <h1>How to keep footers at the bottom of the page (CSS demo)</h1> 
 
    <!-- Header end --> 
 
    </div> 
 
    <div id="body"> 
 
    <!-- Body start --> 
 
    <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade 
 
     gracefully by positioning the footer under the content as per normal. Read the <a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page">full article</a> for all the details.</p> 
 
    <!-- Body end --> 
 
    </div> 
 
    <div id="footer"> 
 
    <!-- Footer start --> 
 
    <p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p> 
 
    <!-- Footer end --> 
 
    </div> 
 
</div>

來源

2016-09-29 10:48:27 Dhaarani

@Munksgaard現在檢查它。使用位置：絕對 – Dhaarani

* { 
 
\t margin: 0; 
 
} 
 
html, body { 
 
\t height: 100%; 
 
} 
 
.wrapper { 
 
\t min-height: 100%; 
 
\t margin: 0 auto -60px; 
 
     background:green; 
 
} 
 
footer{ 
 
\t height: 60px; 
 
     background:#000000; 
 
     color:#ffffff; 
 
     text-align:center; 
 

 
} 
 

 
.push { 
 
\t height: 60px; 
 

 
} 
 

 
header{ 
 
    background:gold; 
 
}

<!DOCTYPE html> 
 

 
<div class="wrapper"> 
 

 
    <header> 
 
\t <h1>Fixed Footer</h1> 
 
    </header> 
 
       
 
    <div class="push"></div> 
 
       
 
    </div> 
 
    
 
    <footer> 
 
     <h5> 
 
     Fixed Footer 
 
     </h5> 
 
    </footer>

來源

2016-09-29 10:49:12

如何將頁腳永久頁面放在頁底

回答

相關問題