use*_*515 3 html css footer bulma
我正在使用Bulma CSS框架来设计网页样式。
好吧，它的工作原理相当不错，但是当我尝试在页面上添加页脚时，它并没有移到底部。
我需要为此制作自己的CSS还是HTML代码本身的问题？
码：
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-three-quarters">
<nav class="panel">
<p class="panel-heading">
Category #1
</p>
<div class="panel-block">
<p>Test descriptie</p>
</div>
</nav>
<nav class="panel">
<p class="panel-heading">
Category #2
</p>
<div class="panel-block">
<p>Test descriptie</p>
</div>
</nav>
<nav class="panel">
<p class="panel-heading">
Category #3
</p>
<div class="panel-block">
<p>Test descriptie</p>
</div>
</nav>
</div>
<div class="column">
<nav class="panel">
<p class="panel-heading">
Laatste statistieken
</p>
<div class="panel-block">
<p>Hier komen de URL's te staan, in een lijst</p>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<p>waarom sta jij niet op de bottom van de <b><s>FUCKING PAGINA!?</s>s></b></p>
</div>
</section>
谢谢。
小智 7
这将达到目的（您的style.css）：
.main {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.section {
flex: 1;
}
然后像这样调整模板：
<body class="main">
<div class="section">
...
</div>
<footer class="footer">
...
</footer>
</body>
小智 7
由于 Bulma 仍然不支持“粘性”页脚，这是最简单的方法：
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
body > footer {
margin-top: auto;
}
它适用于 Chrome、Safari、Firefox、Edge 和 Internet Explorer 11。
小智 1
您可以为页脚设置固定高度，然后使用 calc() 相应地计算容器的高度：
.main-content {
height: calc(100vh - 80px);
}
.hero-foot {
height: 80px;
}