如何使页脚div始终位于页面内容的底部 [英] How to make footer div always be at the bottom of page content

问题描述

我尝试了在这里和其他地方提到的许多不同方法，但是没有一个方法可以达到我想要的目的.

I have tried many different methods mentioned here and elsewhere on the web, but none of them do what I want it to achieve.

我目前在网页上使用以下代码定位和设置样式的元素.然后在其下，我要在页面内容的底部有一个页脚div(请参见下图).如果内容高度小于屏幕高度，则可以将页脚放在屏幕底部，也可以直接放在内容下方(两者都可以).如果内容大于屏幕，我希望页脚位于页面内容的底部，以便当用户向下滚动时看到页脚.

I currently have elements on a webpage positioned and styled with the code below. Then below that, I have a footer div that I want to be at the bottom of the page content (see attached images). If the content height is less than the screen height, I can either have the footer at the bottom of the screen or directly under the content (both work). If the content is larger than the screen, I want the footer to be at the bottom of the page content, so that when the user scrolls down they see the footer.

现在，我的 bottom-sec div是页脚(不是实际具有id页脚的页脚)，但是它粘贴在视口的底部，而不是内容的底部.因此，如果内容大于屏幕，则页脚会覆盖页面内容.

Right now, My bottom-sec div is the footer (not the one that actually has id footer), but it is sticking to the bottom of the viewport, not to the bottom of the content. So, if the content is greater than the screen, the footer overlaps over the page content.

我认为这可能是由于indiitem div中的 position:relative ，但是我需要它们在页面的其余部分才能正常工作.

I think it may be because of the position: relative in the indiitem divs, however I need them to be there for the rest of the page to work.

这是我的代码

.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;">$1000</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;">$50</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 时，它将位于视口的底部，与我的内容重叠，但是如果我向下滚动，它将保持不变在内容中间的位置.

When I tried position: absolute on my 'bottom-sec' div, would be at the bottom of the viewport, overlapping with my content, but if I scrolled down, it stayed in the same position in the middle of the content.

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

When I tried removing the position or position: relative, the footer completely ignored the page content and moved up to be right under my header.

任何帮助将不胜感激！

推荐答案

您需要将 height 设置为 body，html 标记.
然后，您需要在 #footer 标记

You need a set height into body,html tag.
Then you need a absolute position into #footer tag

例如这样的

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>

这篇关于如何使页脚div始终位于页面内容的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！