Question

所以我想在页面上粘贴页脚并让this one为我工作。一切都很好，但不，不是真的..

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

footerproblem

这就是我现在在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

我知道这是在6个月前被问到的，但是我一直在寻找这个问题的解决方案已经有一段时间了，希望其他人可以从我使用的解决方案中受益。当你说某个主框需要获得页眉和页脚之间空间的最小高度时，你就被发现了。

不幸的是，我不知道如何使用纯CSS来实现这一点，当然使用javascript非常容易，但是这种解决方案并不总是可行的，而且在代码分离方面它有点混乱。好消息是，根据您的需要，您可以使用CSS hack。

我所做的是在主体下面添加一个绝对定位的元素，它从标题下方延伸到页脚上方。这样我可以在这个#divBelowBody上添加背景或渐变，这实际上让我假装这个问题解决了（虽然这种解决方案在我的嘴里留下了苦味）。

此外，如果你想在你的内容div周围添加一个边框，并希望它扩展到页脚，即使内容很小，你也被搞砸了（尽管不是真的，我可能会想到一两个黑客）为了使这个可行），所以它只适用于你希望添加背景或渐变等。

您可以在此处查看代码： http://jsfiddle.net/qHAxG/ 水平扩展结果部分以更清楚地看到发生了什么。

Answer 2

试试这个：

使用以下方法替换样式表中的HTML和BODY样式：

html,body {height: 100%;}

然后用这个替换你的“包装器”：

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

希望有所帮助。

Answer 3

试试这个

HTML

<body>
  <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 class="push"></div>
  </div>

  <!-- start footer -->
  <div id="footer">
  </div>
</body>

CSS

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
          height: 100%;
        }

        /* wrap */
        #wrap {
            background: green;
            height: auto !important;
            margin: 0 auto;
        }

        #wrap,
        #main, 
        #main-content {
            margin-bottom: -50px;
            min-height: 100%;
            height: 100%;

        }

        /* main */
        #main {
            background-color: #43145c;
        }

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

        .push, #footer {
            height: 50px;
        }

        #footer {
            position: relative;
            background: red;
        }

Answer 4

请参阅THIS演示：它可能有用。看起来你想要一个背景颜色的div伸展到底部。但粘性页脚的问题在于它也会停留在底部 - 当内容延伸到视口之外时，它会让你不受欢迎。所以它需要一些距离（内容的高度）来知道何时这样做。如果高度不是由实际内容指定的话...... 100％也不会真正做到这一点。因为那时“粘性”页脚并没有真正起作用......它会离开屏幕。真正100％的是什么？

这整件事让我感到沮丧了一年......但是我总能找到一种方法让它看起来像我想要的方式，即使我不能让它以我想要的方式运作...希望链接演示以上可能会给拼图带来另一块。祝你好运！

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

4 个答案: