首页 文章

页脚不浮在底部

提问于
浏览 次
2

我无法将粘性页脚放到我正在处理的网站上 . 我已经尝试了所有的东西，无法想到问题可能是什么 . 如果有人可以看看编码ID欣赏它 .

由于网站上的一些内容只是小段落，我需要一个粘性页脚粘在底部以阻止它漂浮在网站中间 . 我在div中的内容超过了一个图像和id像页脚浮动在底部 . 但是当我关闭div时，我无法让页脚停留在底部，它会在图像 Banner 下面浮动 . 我尝试过的位置：固定;但我不希望它与内容重叠 . 谢谢

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;
}

}
css html footer sticky

4 回答

  • 0

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

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

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

    FIDDLE

    回复于
  • 4

    试试这个页脚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*/
   }
    回复于
  • 0

    看看这个code它可能对你有帮助
    只是包裹div内的页脚标签

    <div id="wrap"> <footer></footer> </div>
    回复于
  • 0

    似乎一切都好，但你错过了某个地方2关闭DIV .

    尝试之前添加它们

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

    http://jsfiddle.net/wF9UL/

    回复于

相关问题