Footer position with no fixed height

Question

I can't place the footer so that it is always at the end of the page. If the page has less content it is not placed at the bottom. The footer has not a fixed heigth. This is my code.

<%
ArrayList<MateriaBean> materieFooter=(ArrayList<MateriaBean>)session.getAttribute("materie");
%>
<div class="container footer-container">
    <div style="height: 10px"></div>
    <div class="col-xs-12  col-sm-9 col-md-9 center-column">
        <div class="col-md-12">
            <strong><p>Materie</p></strong>
            <hr>
            <%
                if (materieFooter != null) {
                    for (int i = 0; i < materieFooter.size(); i++) {
                        String mat = materieFooter.get(i).getNome();
            %>
            <ul class="list-unstyled col-xs-4 col-md-3">
                <li><%=mat%></li>
            </ul>

            <%
                }
            }
            %>
        </div>

    </div>
</div>

and what comes before the footer ? we cannot help with just that. How i would solve it would be with `flex-grow:1` on the content. but without anymore HTML from you, i cannot give you a fullproof solution — Mihai T, Jun 20 '19 at 12:59
This might help you - https://stackoverflow.com/a/56576135/2427237 — nimsrules, Jun 20 '19 at 13:02

Karmalegend · Answer 1 · 2019-06-21T17:43:43.793

0

So this basically sets the page to take up the entire window to then stick the footer to the bottom of it. Aka stick it to the bottom, regardless of size.

html {
  position: relative;
  min-height: 100vh;
}

body {
  margin: 0 0 100px;
}

footer {
  background-color:#e5e5e5;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

edited Jun 21 '19 at 17:43

answered Jun 20 '19 at 13:03

Karmalegend

54
9

you should explain your code – Hien Nguyen Jun 21 '19 at 05:59

score 0 · Answer 2 · answered Jun 20 '19 at 13:38

Have you considered using CSS Grid for this? More information on CSS Grid can be found here.

body {
    height: 100vh;
    background-color: white;
    display: grid;
    grid-template-rows: 100px auto 30px;
}

header {
    background-color: steelblue;
}

main {
    height: 200px;
    background-color: darkgreen;
}

footer {
    background-color: gold;
}

<body>
    <header>
        I'm the header!
    </header>
    <main>
        I'm the main!
    </main>
    <footer>
        I'm the footer!
    </footer>
</body>

Footer position with no fixed height

2 Answers2