没有固定高度的页脚位置[重复]答案

【问题标题】：Footer position with no fixed height [duplicate]没有固定高度的页脚位置[重复]
【发布时间】：2019-06-20 12:51:50
【问题描述】：

我无法放置页脚，使其始终位于页面末尾。如果页面内容较少，则不会放在底部。页脚没有固定的高度。这是我的代码。

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

【问题讨论】：

页脚之前是什么？我们对此无能为力。我将如何解决它是在内容上使用flex-grow:1。但是没有你的 HTML，我不能给你一个完整的解决方案
这可能对你有帮助 - stackoverflow.com/a/56576135/2427237

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

您是否考虑过为此使用 CSS 网格？有关 CSS Grid 的更多信息，请访问 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>

【讨论】：

【解决方案2】：

所以这基本上将页面设置为占据整个窗口，然后将页脚粘贴到它的底部。 Aka 把它粘在底部，不管大小。

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;
}

【讨论】：

你应该解释你的代码