如何使页脚 div 始终位于页面内容的底部

Question

我已经尝试过这里和网络上其他地方提到的许多不同方法，但其中 none 达到了我想要的效果。

我目前在网页上使用以下代码定位和设计元素。然后在其下方，我有一个页脚 div，我希望它位于页面内容的底部（见附图）。如果内容高度小于屏幕高度，我可以将页脚放在屏幕底部或直接放在内容下方（两者都有效）。如果内容比屏幕大，我希望页脚位于页面内容的底部，这样当用户向下滚动时他们会看到页脚。

现在，我的 bottom-sec div 是页脚（不是真正有 id 页脚的那个），但它贴在视口底部，而不是底部内容。因此，如果内容大于屏幕，页脚会覆盖页面内容。

我认为这可能是因为独立项目 div 中的 position: relative，但是我需要它们存在才能使页面的其余部分正常工作。

这是我的代码

.items-container {
    margin-left: 45px;
    margin-right: 45px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
}

#bottom-sec {
    position: fixed;
    bottom: 10px;
    width: 100%;
}

#footer {
    margin: 20px;
    margin-top: 0px;
    display: flex;
    flex-wrap: wrap;
}

#footer > div {
    margin: 35px;
    margin-top: 10px;
    margin-bottom: 10px;
}

<div class="items-container">

    <div class="indiitem" style="position: relative;">

        <div class="list-item">
            <img src="https://imgur.com/c3cv6SW.png" class="item-thumbnail" style="position: relative, padding-bottom: 0vw" id="product-img">
            <a href="/product/OOO001" class="li-title">The_Tiger_Shirt</a>
            <h5 style="font-size: 13px; margin: 0; padding: 0;">00</h5>
        </div>
    </div>

    <div class="indiitem" style="position: relative;">

        <div class="list-item">
            <img src="https://imgur.com/nIZxLpA.png" class="item-thumbnail" style="position: relative, padding-bottom: 0vw" id="product-img">
            <a href="/product/FW20-H01" class="li-title">Basic_Hoodie</a>
            <h5 style="font-size: 13px; margin: 0; padding: 0;"></h5>
        </div>
    </div>

    <div id="bottom-sec">
        <hr style="width: 170px; text-align: center; margin-top: 50px;">
        <div id="footer">
            <div id="links">
                <h4>M_E_N_U:</h4>
                A navbar is supposed to be here--took up too much space so it isn't included
            </div>
            <div id="mailform">
                <form method="POST" action="/shop" id="enter_email"> 
                    <input type="text" name="email" id="email" required>
                    <input type="submit" value=">>>>" id="emailpost">
                </form>
            </div>
        </div>

当我在 'bottom-sec' div 上尝试 position: absolute 时，它会位于视口的底部，与我的内容重叠，但如果我向下滚动，它会停留在内容中间的相同位置。

当我尝试删除位置或 position: relative 时，页脚完全忽略了页面内容并向上移动到我的页眉下方。

如有任何帮助，我们将不胜感激！

Answer 1

您需要将 height 设置到 body,html 标签中。
然后你需要一个 absolute 位置到 #footer 标签

例如像这样：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* adjust to footer height */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

Answer 2

无需混淆太多显示模式的最简单和最干净的方法之一是利用 flexbox。真的很简单，我写了一篇深入讲解的文章here:

它面向 bulma，但在最后一段中，我还分享了如果没有像 bulma 这样的框架，它是如何工作的。还有一个可以打开和编辑的代码笔。如果您需要任何帮助，请告诉我:)

如何使页脚 div 始终位于页面内容的底部

How to make footer div always be at the bottom of page content

html

css

css-position

footer