Html CSS页脚不自动向下移动

我的网站有以下CSS代码：

@charset "UTF-8";
/* CSS Document */

* {
    margin:0;
    padding:0;
}

html, body, #wrap {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-family:Calibri;
}
#wrap {
    min-height: 100%;
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -580px; /* the bottom margin is the negative value of the footer's height */
    border:4px solid #000000;
}

.push {
    height: 580px; /* .push must be the same height as .footer */
}

/* header stuff */
#header-topbar {
    width:100%;
    height:40px;
    /* padding:10px 10px 10px 10px; */
    background-color:#666666;
}
#header-topbar2 {
    width:100%;
    height:100px;
    /* padding:10px 10px 10px 10px; */
    background-color:#eeeeee;
}
#phone-tel {
    float:right;
    margin-right:16%;
    margin-top:5px;
    font-size:20px;
}
#logo {
    position:absolute;
    float:left;
    margin-left:15%;
    margin-top:15px;
}

/* main body/content */
#body-content {
    padding-bottom:200px;
    width:80%;
    margin:120px auto 0 auto;
    padding:10px 10px 10px 10px;
    border:solid 1px #a79494;
    border-top:solid 4px #a2cd3a;
}

/* homepage-boxes */
#homepagebox {
    width:80%;
    margin:0 auto 0 auto;
}
#homepagebox .column {
    float: left;
    width: 25%;
}
#homepagebox .column div {
    margin: 5px;
    min-height: 350px;
    background: #eeeeee;
}

/* FOOTER */
#footer {
    width:100%;
    height:580px;
    border-top:4px solid #666666;
    background-color:#eeeeee;
}
#footer-inner {
    width:80%;
    margin:0 auto 0 auto;
    height:inherit;
}
#footerTop {
    width:100%;
    height:480px;
    padding-top:10px;
    border-bottom:2px #000000 solid;
}
#footerTopLeft {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    margin-top:10px;
    padding:0 15px 10px 15px;
    border-right:1px solid #000000;
}
#footerTopMid {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    margin-top:10px;
    padding:0 15px 10px 15px;
    border-right:1px solid #000000;
}
#footerTopRight {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    padding:0 15px 10px 15px;
}

#enquiryForm                    { clear:both; padding:8px 40px 0 0;  }
.enquiryField                   { clear:both; padding:5px 0; }
.enquiryField label             { clear:none; float:left; }
.enquiryField input             { clear:none; font-family:Calibri; float:right; padding:3px; width:189px; }
.enquiryField textarea          { clear:none; float:right; font-family:Calibri; padding:5px; width:189px; }

.enquiryError                   { clear:both; color:#fff; font-family:Calibri; }
#enquirySent                    { color:#fff; font-family:Calibri; }

页脚显示在页面底部，但如果主页内容太长，页脚根本不会向下移动。内容仅显示在页脚上

例如，在我的HTML中，有4个div彼此对齐，它们显示在页脚上

---

我在这里创建了一个提琴：

尝试添加

溢出：自动到#换行。当您浮动元素时，它们将从布局中删除，并且默认情况下，“包裹”不再调整大小以适合它们。
您需要清除浮动元素，请在




注意：我还没有修复你的页脚对齐，它们非常混乱
向上，我建议你学习CSS定位

是的，您缺少清除浮动，但除此之外，我认为您应该尝试从头开始重做css，因为对于一些应该非常简单的东西来说，它非常混乱。你也可以在谷歌上搜索“MicroClearFix”，这会让你更容易使用浮动。我也会避免使用！重要提示：它有它的用途，但在99.9%的情况下，它没有理由出现在css中的任何地方。这是自找麻烦。同意上述评论
<div style="clear: both;"></div>