Question

即使我调整页面大小，页脚仍应保留在底部。在我的情况下，当我调整页面高度时页脚重叠内容。

 .body{
    	background: #00b7ea; /* Old browsers */
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:85%;
            height: 100%;
    }

    .container{
     min-height:100%;
     position: relative;
    }
    .formContainer{
    	width:30%;
        height: 100px;
    	background-color:#fff;
    	margin:auto;
            padding-top: 0;
    	border-radius:5px;
    	box-shadow:5px 5px 55px #9999;
    	padding-bottom:60px;
    }
    .footer{
        position:absolute;
    	width:100%;
        bottom:0;
    	height:60px;
    	background-color:#333;
    }

<body class="body">
      	<header class="header">
    	</header>
      	<div class="container">
                    <div class="formContainer">
                    </div>
    		<footer class="footer">
    		</footer>
         </div>
     </body>

Answer 1

您应该将页脚标记移出div

<header class="header">
    </header>
    <div class="container">
                <div class="formContainer">
                </div>        
     </div>
    <footer class="footer">
    </footer>

<强> DEMO

将height:100%添加到html和正文，然后只有你的容器占用100％的高度并保留你的html代码。

html, body{
    height:100%
}

<强> DEMO 2

P S - 我认为你的CSS中的.body是一个错误，它应该只是body

Answer 2

你需要的是Sticky Footer，有几种方法可以实现它。

http://css-tricks.com/snippets/css/sticky-footer/（使用CSS）
http://josephfitzsimmons.com/home/simple-sticky-footer-using-jquery/（使用jQuery）

Answer 3

试试这个

http://jsfiddle.net/WPYCJ/

.footer{
    position:fixed;
    width:100%;
    bottom:0;
    height:60px;
    background-color:#333;
}

Answer 4

试试这个。感谢

CSS

 .body{
    background: #00b7ea; /* Old browsers */
    font-family:Arial, Helvetica, sans-serif;
    font-size:85%;
        height: 100%;
}

.container{
 height:90%;
background-color:#fff;
}
.formContainer{
    width:100%;
    height: 100px;
        margin:auto;
        padding-top: 0;
    border-radius:5px;
    box-shadow:5px 5px 55px #9999;
    padding-bottom:60px;
}
.footer{
    width:100%;
    bottom:0;
    height:5%;
    background-color:#333;
}

HTML

<body class="body">
    <header class="header">
    </header>
    <div class="container">
                <div class="formContainer">
                </div>
             </div>
<footer class="footer">test
        </footer>

 </body>

Answer 5

我遇到同样的问题，我使用了这段代码：

<script>
    var top = $(document).height() - $("footer.main-footer").height() ; 
     $("footer.main-footer").css('top' , top);
</script>

将.main-footer更改为您的页脚类。

如果内容非常少，如何将页脚始终粘贴在页面底部？

5 个答案: