粘性页脚,或者更确切地说:内容不会延伸到页脚

Question

所以我想在页面上粘贴一个粘性页脚并让这个为我工作.一切都很好,但不,不是真的......

问题是我希望页脚上方的内容一直延伸到它.现在,包含主要内容的框在框中的文本之后结束,并且页脚和内容之间有一个很大的空间.我想要的是延伸到页脚的主要内容的背景!看到我美丽的形象!

这就是我现在在html中所拥有的:

<div id="wrap">
  <!-- start header -->
    <div id="header">
      <div id="header-content">
      </div>
    </div>
  <!-- end header -->

  <!-- start main -->
  <div id="main">
    <div id="main-content">
    </div>
    </div>
  <!-- end main -->
</div>
<!-- start footer -->
<div id="footer">
</div>

并在CSS中:

html {
   height: 100%; }

body {
  height: 100%;}

 /* wrap */
 #wrap {
   min-height: 100%; }

/* main */
 #main {
   background-color: #43145c;
   overflow: auto;
   padding-bottom: 50px; }

 #main-content {
   width: 720px;
   margin: auto;
   background-color: #643280;
   padding-top: 20px; }

#footer {
  position: relative;
  margin-top: -50px;
  height: 50px;
  clear: both;
  background: red; }

我尝试将主要的最小高度设置为100%,但没有奏效.我只想要主要内容的背景颜色一直到页脚,因为它与正文和主框不同.

它有意义吗？有人可以帮忙吗？

Answer 1

尝试这个：

将样式表中的 HTML 和 BODY 样式替换为：

html,body {height: 100%;}

然后用以下内容替换您的“包装器”：

#wrap { min-height: 100%;
height: auto; }

希望有帮助。