Question

在this页面上，我试图让页脚（简报注册表单）落到页面底部。

但是#container在某种程度上比身体更大，而且它正在弄乱一切。有任何想法吗？

这是问题的图像。蓝色是标签的末尾。 http://i.imgur.com/1Ww3C6R.png

body#page {
background-color: white;
background-image: none;
width: 100%;
height: 100%;

container {
width: 100%;
margin: 0 auto;
margin-left: 0px;
}

Answer 1

问题是你的div.container设置为高度：100％;如果它从页面顶部开始就可以了，但它会被你的标题所抵消。您需要执行以下操作：

首先，使用border-box将所有填充保持在元素的维度内。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

现在你需要为你的内容创建一个包装器并将你的页脚放在它下面

<div class="wrapper">
    <div id="drawer">...</div>
    <div class="container">...</div>
</div>
<footer>...</footer>

和css：

.wrapper{
	height: 100%;
	width: 100%;
	padding-bottom:50px; /* reserving bottom space for footer */ }

.container{ 
	display: inline-block; /* don't force it to 100%, just make it flexible  */
	float:left; /* using float will spare you from extra white-space bug occuring in pages with elements having display:inline-block property */
	clear:both;
	width: 100%;  }

footer { 
	width: 100%;
	float:left;
	clear: both;
	height:50px;
	margin-top:-50px; /*moving it into the padded bottom space of wrapper*/ }

你去吧。现在，除非您的内容大于屏幕高度的100％，否则您的页脚将粘贴在页面底部。然后它会分别下降。

修复页脚中的容器溢出问题

1 个答案: