Html Div 100%最小高度问题

当一个页面包含大量内容时，页脚被向下推，页面以页脚结束。但是，如果页面有少量内容，页脚会附着在内容的底部，并在页面的一半处浮动，在其下方留下空间

抱歉，这已经被报道了很多次，尽管尝试了很多解决方案，我仍然遇到了问题。而且我是个新手。我可以让页脚停留在底部，但它有时会覆盖内容/在其下方留下间隙/调整窗口大小时覆盖内容/或最小高度大于窗口，并显示滚动条

请帮忙

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0px;
     padding: 0px;
     border: 0px;
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
}
:focus {
     outline: none;
}
table {
     border-collapse: separate;
     border-spacing: 0px;
}
caption, th, td {
     text-align: left;
     font-weight: normal;
}
table, td, th {
     vertical-align: middle;
}
blockquote:before, blockquote:after, q:before, q:after {
     content: "";
}
blockquote, q {
     quotes: "" "";
}
a img {
     border: none;
}

.container {
     width: 980px;
     margin: 0 auto;
     background: #fff;
     z-index: 0;
     position: relative;
     border-left: 1px solid #ddd;
     border-right: 1px solid #ddd;
     -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
     -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}
.hfeed {
     width: 700px;
     float: right;
     margin: 0;
}
.aside {
     width: 220px;
     float: left;
     margin: 0 0 0 20px;
}
.aside ul {
     margin: 0;
     padding: 0;
     list-style: none;
}
.footer {
     clear: both
}




body, input, textarea {
       font: 12px/18px Arial, sans-serif;
       color: #666;
}
body {
      background: #eee;
      min-width: 980px;
}

#content {
      padding: 0 0 15px 0;
      background-image: none;
      z-index: 0;
      position: relative;
}
#inner_content {
      padding: 0 15px 0 0;
      margin: 0;
}
#full_width {
     padding: 0 0 0 20px;
     width: 940px;
}
#full_width h1 {
     margin: 0 0 20px 0
}

.footer {
     width: 100%;
     padding-bottom: 0px;
     position: relative;
     background: #333 url(./_assets/img/bg-footer.png) left top repeat-x;
     border-top: 0px solid rgba(50, 50, 50, 0.1);
}
.footer-info {
     background: none;
     margin: 0px auto 0px auto;
     padding: 25px 20px 0px 20px;
     width: 940px;
     color: #aaa;
     z-index: -1;
}
.footer-info .latest, .footer-info .offers {
     margin-right: 20px
}
.footer-info .block ul li a:hover {
     color: #ccc
}
.footer-info .featured a.ad-125 {
     margin: 20px 5px 0 5px;
     display: block;
     float: left;
     width: 133px;
     height: 133px;
     overflow: hidden;
}
.footer-info .featured img {
     padding: 3px;
     background: #444;
     border: 1px solid #555;
}
.footer-info .featured img:hover {
     background: #555;
     border: 1px solid #666;
}
.footer-info .featured p {
     text-align: right;
     clear: both;
     padding: 5px 10px 0 0;
     margin: 0;
}
.footer-info .featured p a {
     font-size: 12px;
     color: #666;
     background: url(_assets/img/bg-link.jpg) left 1px no-repeat;
     padding-left: 17px;
}
.footer-info .featured p a:hover {
     background-position: left -12px;
     text-decoration: none;
     color: #31cef5;
}
.footer-base {
     width: 100%;
     height: 30px;
     background: #111;
     margin: 0 auto 0px auto;
     padding: 0px;
     z-index: 1;
     position: relative;
     border-top: 1px solid #333;
}
.footer-base-inner {
     width: 940px;
     margin: 0 auto;
}
.footer-base p {
     font-size: 10px;
     margin: 0 !important;
     padding: 0;
     border-right: none;
     line-height: 30px;
     text-align: center;
}
.footer-base p a {
     text-decoration: underline;
     color: #666;
}
.footer-base p a:hover {
     text-decoration: none
}
.textwidget {
     font-size: 11px;
     margin-bottom: 20px;
}
.footer .menu {
     position: relative;
     top: 0;
}
.footer .menu li {
     float: none;
}
.footer .menu li a {
     text-shadow: none;
     font-weight: normal;
     line-height: 23px;
     color: #999;
     font-weight: inherit;
}
.footer .menu li a:hover {
     text-shadow: none
}

---

对于页脚，我使用一个简单的解决方案：

假设我们有这样的布局：

<div class="content">
    <p>All your page elements would go there</p>
</div>
<footer>
    <p>Your Footer</p>
</footer>

这样，我们就可以确保页脚始终处于看不见的位置，并且位于页面底部，除非内容大于浏览器的视口

缺点：

• 它是CSS3，因此与旧浏览器的兼容性受到限制

---

您可以使用此技巧将页脚始终放在页面底部。如果内容较短，则它将位于屏幕底部。如果内容较长，则页脚将位于内容之后。它有点简单，适用于所有浏览器

HTML：

<div id="container">
   // ALL THE PAGE HTML GOES IN HERE
  <div id="push"></div>
</div><!—End Container—>
<div id="footer">// FOOTER HERE</div>

---

基本上，您可以获得

页脚的
高度
，并将相同的
高度
放入
#推
。然后将负数
边距底部
添加到
容器
div，同样的
高度
请将代码添加到小提琴中。PS：您是否尝试过
底部：0px
？-页眉和页脚将是其内容的高度，中间部分将增长以适应屏幕的其余部分。如果内容太长，则页脚将从底部推出（停留在内容下方），请查看小提琴。是的，我试过底部：0px。问题我有：-页脚悬停在内容上，如果窗口大小或没有-仍然有空间下的页脚（我不知道它是什么，它不是填充）
<div id="container">
   // ALL THE PAGE HTML GOES IN HERE
  <div id="push"></div>
</div><!—End Container—>
<div id="footer">// FOOTER HERE</div>

#container {
    min-height: 100%;
    margin-bottom: -330px;
    position: relative;
}
#footer {
    height: 330px;
    position: relative;
}
#push {
    height: 330px;
    clear: both;
}