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

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

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

问题是，即使我将页脚放在底部（经过一点修补），页脚也会穿过框。基本上，有人知道如何在盒子后面制造间隙吗？我以为垫底应该这样做

我希望我已经说清楚了

---

非常感谢。干杯。

尝试在

页脚中添加一个
页边顶部
，该页边顶部超过元素的高度，包含
框
项。
删除所有绝对位置，然后添加：

.IRL {
  margin-bottom: 50px;
}


或者，调整各种元素的绝对位置
top
和
bottom
值。
非常感谢链接。方便的资源。我会为它演奏一点。在盒子的平行柱的情况下，我需要一些定位，例如左100px，这是一个好主意吗？
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;
}

.IRL {
  margin-bottom: 50px;
}