页脚不浮动在底部
Posted
技术标签:
【中文标题】页脚不浮动在底部【英文标题】：Footer Not floating on bottom 【发布时间】：2014-05-25 05:27:46 【问题描述】：我无法将粘性页脚添加到我正在处理的网站上。 我已经尝试了所有方法，但想不出问题可能出在哪里。如果有人可以看看编码 id，不胜感激。
由于网站上的某些内容只会是小段落，我需要一个粘性页脚来粘在底部，以阻止它漂浮在网站中间。 我的 div 中的内容与图像重叠，并且 id 像页脚一样漂浮在底部。但是，当我关闭 div 时，我无法让页脚停留在底部，它开始在图像横幅下浮动。我试过位置：固定；但我不希望这样，因为它与内容重叠。谢谢
<!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" >
<nav class="nav clearfix">
<a id="menu-toggle" class="anchor-link" href="#"><img src="images/3lines.png" width ="31" ></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 谢谢 【参考方案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 中。删除它并稍后进行一些调整，一切正常！再次感谢您，非常感谢！以上是关于页脚不浮动在底部的主要内容，如果未能解决你的问题，请参考以下文章