Question

天真地编码页脚，如果内容不足，则页脚和页面底部之间会有空白区域。我想摆脱这个并将页脚移到窗口的底部。

另一方面，当内容更多时，我希望内容按下页脚（所以位置：固定;底部：0;不会这样做。）

我如何实现这一目标？

Answer 1

这是一个较新的CSSStickyFooter：

http://www.cssstickyfooter.com/

Answer 2

http://www.htmltutorialsandtips.com/css-sticky-footer有一个很棒的教程，解释了如何做到这一点。它通过一个基本的HTML标记和用于为该效果设置样式的CSS。它很容易理解，并且很好地解释了CSS实际上是如何起作用的。

Answer 3

您可以通过以下方式实现此结果：

声明<body>＆amp;的高度值<html>代码
向嵌套的包装器元素声明minimum-height值，通常是包装体结构中包含的所有后代元素的元素

Code Pen Example

$("#addBodyContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".flex-col:first-of-type");
});

$("#resetBodyContent").on("click", function() {
  $(".flex-col p").remove();
});

$("#addFooterContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo("footer");
});

$("#resetFooterContent").on("click", function() {
  $("footer p").remove();
});

html, body {
    height: 91%;
}

.wrapper {
    width: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 10px;
    display: block;
    min-height: 100%;
}

footer {
    background: black;
    text-align: center;
    color: white;
    box-sizing: border-box;
    padding: 10px;
}

.flex {
    display: flex;
    height: 100%;
}

.flex-col {
    flex: 1 1;
    background: #ccc;
    margin: 0px 10px;
    box-sizing: border-box;
    padding: 20px;
}

.flex-btn-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.btn {
    box-sizing: border-box;
    padding: 10px;
    transition: .7s;
    margin: 10px 10px;
    min-width: 200px;
}

.btn:hover {
    background: transparent;
    cursor: pointer;
}

.dark {
    background: black;
    color: white;
    border: 3px solid black;
}

.light {
    background: white;
    border: 3px solid white;
}

.light:hover {
    color: white;
}

.dark:hover {
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="flex-btn-wrapper">
        <button id="addBodyContent" class="dark btn">Add Content</button>
        <button id="resetBodyContent" class="dark btn">Reset Content</button>
    </div>
    <div class="flex">
    <div class="flex-col">
      lorem ipsum dolor...
    </div>
    <div class="flex-col">
      lorem ipsum dolor...
    </div>
    </div>
    </div>
<footer>
    <div class="flex-btn-wrapper">
        <button id="addFooterContent" class="light btn">Add Content</button>
        <button id="resetFooterContent" class="light btn">Reset Content</button>
    </div>
    lorem ipsum dolor...
</footer>

如何将网站页脚保留在窗口底部？

3 个答案: