页脚不浮动在底部

Posted

技术标签:

【中文标题】页脚不浮动在底部【英文标题】: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"   >
<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 中。删除它并稍后进行一些调整,一切正常!再次感谢您,非常感谢!

以上是关于页脚不浮动在底部的主要内容,如果未能解决你的问题,请参考以下文章

Angular Material 固定工具栏和粘页脚

如何将页脚固定在页面底部

如何将页脚固定在页面底部

RDLC页脚不显示visual studio 2008

将页脚推到短页面的底部

页面内容不够高footer始终位于页面的最底部