Question

我想简单地在我的html页面底部放一个页脚。我一直无法在网上找到一个像样的教程，主要是因为我的内容虽然简单，但并不标准（我想）。

我有以下HTML代码（只是一个测试页面，而不是真实的东西）：

<html>

<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<div id = "container">


<div id = "header">
This is the header
</div>

<div id = "body">


<div class="IRL">
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div>
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div>
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div>
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div>
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div>
</div>



<div id = "footer">
Testing footer
</div>

</div>
</div>
</html>

“style.css”的相关内容是：

html,

body    {
margin: 0;
padding: 0;
height: 100%;
}


#container  {
min-height:100%;
position:relative;
}

#container {
height:100%;
}

#body {
padding:10px;
padding-bottom:50px;   /* Height of the footer */
}

#footer {
position:absolute;
bottom:0;
width:100%;
height:50px;   /* Height of the footer */ //This is from a tutorial
}

.IRL {

position: absolute; top:50px; left:10px;
}


.IRL li{

margin:0px 150px 0px 0px;
list-style-type:none;

}



.box    {
margin-top: 10px;
padding: 5px 5px 5px 5px;
border: 2px solid #000000;
width:100px;
height: 100px;
color:#000000;
}

问题是即使我把它放在底部（经过一些修修补补）之后，页脚也会切入盒子。基本上有人知道如何在盒子之后创造差距吗？我以为填充底部应该这样做？

我希望我一直很清楚

非常感谢提前。欢呼声。

Answer 1

尝试向margin-top添加#footer，其超出了包含.box项的元素的高度。

Answer 2

删除所有绝对定位并添加：

.IRL {
  margin-bottom: 50px;
}

Demo

或者，调整各种元素的绝对定位top和bottom值。

如何在页脚框后创建“填充底部”？

2 个答案: