Search code examples
htmlcsscss-positionfooter

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.

Images of what I want here:

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!

Solution

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