Question

对于我需要修复的问题，我有两个插图：

当textarea增长时，页脚是相对的并且被推下来，但是有一个页脚下方的空白

页脚是绝对的，就在页面底部，但是当内容（textarea）增长时它没有被推下来

页脚和代码的代码内容是：

.content {
    padding-bottom: 124px;
    position: relative;
}

.footer{
    width: 100%;
    height:124px !important;
    margin: 0px auto;
    padding-top: 20px;
    padding-bottom: 40px;
    position: relative !important;
    bottom: 0px; !important;
    left: 0px;
}

问题是，即使内容未满，如何才能使页脚保持在底部，而随着内容的增长，它应该被进一步推下。

Answer 1

您可以使用http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

中的粘性页脚解决方案

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    .margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
}

使用HTML

...
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>

    </div>
    <div class="footer">
        Content of footer
    </div>
</body>
</html>

唯一的限制是您必须知道页脚

的大小

Answer 2

申请

overflow: auto;

到content

Answer 3

你可以使用calc技巧，这种技巧不是那么简单，也很简单，但它只适用于IE9及以上版本，它还要求你知道页脚的大小。我还添加了%值，以便为旧浏览器提供一些相似的逻辑。这也将允许内容尽可能多地扩展。

html, body { 
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
}
#content, #footer {
  width: 100%;
  background: whiteSmoke;
}
#content {
  min-height: 90%;
  min-height: calc(100% - 100px);
}
#footer {
  height: 10%;
  height: calc(100px);
  background: #000;
}

<div id="content"></div>
<div id="footer"></div>

随着内容的增长，下推页脚

3 个答案: