Question

我无法将粘性页脚放到我正在处理的网站上。我已经尝试了一切，无法想出问题所在。如果有人可以看看编码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;
}

}

Answer 1

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

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

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

FIDDLE

Answer 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*/
   }

Answer 3

查看此code 它可以帮助你只在包装div中写下页脚标记

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

Answer 4

似乎一切都好，但是你错过了某个关闭DIV的地方。

尝试在

之前添加它们

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

http://jsfiddle.net/wF9UL/

页脚不浮在底部

4 个答案: