1

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

 .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>

4

5 回答 5

1

您应该将页脚标签移出 div

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

演示

添加height:100%到 html 和 body，然后只有您的容器采用 100% 的高度并保持您的 html 代码不变。

html, body{
    height:100%
}

演示 2

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

于 2013-07-23T06:19:25.743 回答
0

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

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

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

于 2015-01-13T19:06:29.863 回答
0

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

  1. http://css-tricks.com/snippets/css/sticky-footer/（使用 CSS）
  2. http://josephfitzsimmons.com/home/simple-sticky-footer-using-jquery/（使用 jQuery）
于 2013-07-23T06:22:01.480 回答
0

尝试这个

http://jsfiddle.net/WPYCJ/

.footer{
    position:fixed;
    width:100%;
    bottom:0;
    height:60px;
    background-color:#333;
}
于 2013-07-23T06:23:36.317 回答
0

尝试这个。谢谢

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>
于 2013-07-23T06:29:30.827 回答