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.

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.

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.

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.

Here's my code

.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>

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.

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.

Any help would be appreciated!

回答1:

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

For example like this:

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>

回答2:

One of the simplest and cleanest ways without having to mess with too many display modes is by taking advantage of flexbox. It's really simple, I wrote an article explaining it in depth here:

It's geared towards bulma but in the last paragraph I also share how this would work without a framework like bulma. There is also a codepen that you can open and edit. If you need any help, let me know :)

来源：https://stackoverflow.com/questions/65209581/how-to-make-footer-div-always-be-at-the-bottom-of-page-content

标签

html

css

css-position

footer