页脚不浮动在底部答案

【问题标题】：Footer Not floating on bottom页脚不浮动在底部
【发布时间】：2014-05-25 05:27:46
【问题描述】：

我无法将粘性页脚添加到我正在处理的网站上。我已经尝试了所有方法，但想不出问题可能出在哪里。如果有人可以看看编码 id，不胜感激。

由于网站上的某些内容只会是小段落，我需要一个粘性页脚来粘在底部，以阻止它漂浮在网站中间。我的 div 中的内容与图像重叠，并且 id 像页脚一样漂浮在底部。但是，当我关闭 div 时，我无法让页脚停留在底部，它开始在图像横幅下浮动。我试过位置：固定；但我不希望这样，因为它与内容重叠。谢谢

HTML

<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Linear Partners</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta name="viewport" content="initial-scale=1, maximum-scale=2" />

<link href="style1.css" rel="stylesheet" />


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script type='text/javascript' src='js/main.js'></script>
<script>
$(document).ready(function() {

    $('#menu-toggle').click(function () {
      $('#menu').toggleClass('open');
      e.preventDefault();
    });

});
</script>

  </head>
<body>

<div id="wrap">

    <div id="mainpage">


<div id="header">
<img src="images/Linear.Partners.Logo.png" width ="173" height="65"  alt="logo">
<nav class="nav clearfix">
        <a id="menu-toggle" class="anchor-link" href="#"><img src="images/3lines.png" width ="31" height="25"></a>
        <ul class="simple-toggle" id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a>
            <ul>
                <li><a href="#">Team</a></li>
            </ul>
        </li>
            <li><a href="#">Expertise</a></li>
            <li><a href="#">Research</a></li>
            <li><a href="#">Best Practice</a></li>
            <li><a href="#">Join Our Team</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>  
        </div>


<div id="bg-image"style="background-image:url(images/slide1.jpg); background-position:50% 50%;">


<div id="main" class="wrapper clearfix">
<left>
<h1>Privacy Policy</h1>
<p>Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</p>
</left>

<right>
<h1>Privacy Policy</h1>
Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</right>

</div>

</div>
<div class="clear"></div>

<footer>
<div id="footer-wrapper">
<div id="footer-content">

<div class="Copyright">
Copyright © 2014 Linear Partners. All rights reserved.
</div>

<div class="footer-nav">
<a href="index.html">Home</a> <a href="privacy.html">Privacy</a> <a href="diversity.html">Diversity Policy</a>
</div>

</div>
</div>
</footer>

<!-- #end footer area --> 


</body>
</html>

CSS

html, body {
height: 100%; margin: 0; padding: 0;
}
body
{
margin:0;
padding:0;
background: #fff;
font: 13px'helvetica', ariel, sans-serif;
color: #000;
}

/*Header*/

#header
{
position:relative;
width:autopx;
max-width:950px;
height:65px;
margin: 0 auto;
z-index:10000; 
background: #fff;
padding:20px;
}

  #wrap {min-height: 100%;}

#mainpage {
    padding-bottom: 85px;}  /* must be same height as the footer */

.footer {position: relative;
    margin-top: -85px; /* negative value of footer height */
    height: 85px;
    clear:both;} 



/* nav */

.nav
{
width:autopx;
float:right;
padding-top:22px;
}

ul.simple-toggle
{
list-style:none;
padding: 0px;
margin: 0px;
text-align: center; 
}

ul.simple-toggle li {
display: inline-block;
text-align: center;
border-right: 1px solid #cfcfcf; 
}

ul.simple-toggle li:last-child
{
border-right: none;
}

ul.simple-toggle li a
{ 
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color:#000;
text-decoration:none; 
}

.anchor-link
{
display: none;
background-color: #16447b;
margin-top: -10px;
float: right;
height:40px;
width:40px;
}

.anchor-link img
{
margin:9px 6px 0px 4px ;
}

#mobile-nav
{
display:none;
}

nav ul ul
{
display: none;
}

nav ul li:hover > ul
{
display: table-cell;
text-align: center;
vertical-align: middle;
}

nav ul
{
list-style: none;
position: relative;
display: inline-table; 
}

nav ul li:hover
{
background: #16447b;
color: #fff; 
}

nav ul li:hover a
{
color: #fff; 
}

nav ul ul
{
background: #092a55; padding:0px; margin:0px;
position: inherit; top: 100%; 
}

nav ul ul:hover a
{
background: #6689b3; 
}   

 /*wrapper*/

#bg-image { 
z-index:-5780000;
float: left;
width: 100%;
height:250px;
background-size:cover;
margin-top:2px;
border: 2px solid #16447b;
border-width: 2px 0;
border-color: #fff;  
box-shadow: 0 2px 0px #16447b, 0 -2px 0px #16447b;
}

.wrapper
{
width:90%;  
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:150px;
} 



#main left{
background-color: #fff;
width: 62.5%;
float: left;
}

#main right
{
background-color:#fff; 
width: 35%;
float: right;
}


/*Footer*/


#footer-wrapper
{
height:65px;
margin: 0 auto;
background: #000;
padding:20px;
}
#footer-content
{ 
height:65px;
max-height:120px;
position:relative;
width:100%;
max-width:950px;
margin: 0 auto; 
margin-top:20px;
color: #fff;
}
.Copyright
{ 
margin-top:5px;
float:left;
color: #fff;
text-decoration:none;
}
.footer-nav
{ 
margin-top:5px;
float:right;
color: #fff;
text-decoration:none;
margin-right:-6px;
}
.footer-nav a
{ 
color: #fff;
padding-left:6px;
padding-right:5px;
border-right: 1px solid #fff;
text-decoration:none;
float: left; 
}
.footer-nav a:last-child
{ 
border:none;
}
.footer-nav a:hover
{ 
text-decoration:underline;
}

.clear {
    clear:both;
}

/*media*/

@media (max-width:750px){

ul.simple-toggle
{
display: none;
}

.anchor-link, #mobile-nav
{
display: block;
}

ul.open
{ 
background-color: #16447b;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 20px;
top: 100%;
width: 175px;
z-index: 50000; 
opacity:0.90;
}
ul.open ul
{ 
background-color: #092a55;
display: none;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 100%;
width: 175px;
z-index: 50000;
}

ul.open li
{
display: block;
list-style: none;
text-align: center;
border: none;
}

ul.open li a
{
display: block;
padding: 10px 5px;
border-bottom: 0px solid #5578a4;
color: #fff;
}

ul.open li a:hover
{
background-color: #375d8f;
color: #fff;
}

.wrapper
{
width:85%;  
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:250px;
} 
#main left{
background:#fff;
width: 62.5%;
float: left;
}

#main right
{
background:#fff;
width: 35%;
float: right;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{ 
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}

}

@media (max-width:480px){

img[src*="images/Linear.Partners.Logo.png"]
{
margin-top:13px;
height:40px;
width:106px;
}

.bg-image { 
float: left;
width: 100%;
height:150px;
background-size:cover;
}

.wrapper{
width:80%;
height:200px;
margin-top:75px;

}

#main right
{
float: left;
clear: left;
margin: 0 0 10px; 
width: 100%;
}   

#main left
{
float: left;
clear: left;
margin: 0 0 10px; 
width: 100%;
}

.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{ 
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}

}

【问题讨论】：

你能做一个jsFiddle吗？
试试css-tricks.com/snippets/jquery/jquery-sticky-footer
这是一个 jsFiddle jsfiddle.net/m4jaf 谢谢

标签： css html footer sticky

【解决方案1】：

为避免页脚与内容重叠，在与页脚高度对应的内容中添加margin

.footer-nav{ 
    //...
    position:fixed;
    bottom;0;
    height:50px; // just an example
    //...
}

.wrap{
    margin-bottom:50px;// same as .footer-nav height
}

FIDDLE

【讨论】：

【解决方案2】：

为页脚 div 试试这个：-

   #footer-wrapper {
             background: none repeat scroll 0 0 #000000;
             height: 65px;
             margin: 0 auto;
             padding: 20px;

             bottom: 0;/*add from here*/
             left: 0;
             position: fixed;
             width: 100%;/*to here*/
   }

【讨论】：

感谢尝试，固定位置在窗口很小的时候隐藏内容。

【解决方案3】：

看看这个code 它可以帮助您
只需将页脚标签写入 wrap div 中

<div id="wrap"> <footer></footer> </div>

【讨论】：

感谢您的尝试，但它仍然没有粘在底部。

【解决方案4】：

似乎一切正常，但您错过了 2 个关闭的 DIV。

尝试在之前添加它们

<div class="clear"></div>

http://jsfiddle.net/wF9UL/

【讨论】：

谢谢，我确实意识到了这一点，当我关闭它们时，页脚然后浮动到横幅图像下方，而不是浮动在文本内容下方。如果我删除 2 个关闭 div，我会在一定程度上达到我想要的外观。
所以问题在你的横幅中。我没有要检查的图像。尝试使用横幅 css，添加 padding-bottom
感激不尽！我回过头来，意识到我有一个 float:left 在 css 中。删除它并稍后进行一些调整，一切正常！再次感谢您，非常感谢！