如何将页脚永久页面放在页底

-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

如何将页脚永久页面放在页底

回答

相关问题