我正在寻找没有position: absolute; bottom: 0或position: fixed的示例。
以下是我的布局示例。
如果没有足够的内容将页脚向下推，我想将页脚放在页面底部，因此我正在寻找min-height可以将页脚推到底部的。
.application-layout__container {
margin: 0 auto;
padding: 0 15px;
}
.button__left {
float: left;
}
.button__right {
float: right;
}
.application-layout__button-group {
clear: both;
}
.page-footer {
background-color: #0065bd;
color: #fff;
margin-top: 42px;
}
.page-footer nav {
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 21px 0;
}
.page-footer nav a {
color: #fff;
}
}<html>
<body>
<div>
<div class="application-layout__container">
<div class="application-layout__header">
<h1>
Application
</h1>
</div>
<div class="application-layout__body">
<form>
<div class="form-group">
<label for="input">Input</label>
<input id="input" type="text" />
</div>
</form>
</div>
<div class="application-layout__button-group">
<div class="button__left">
<button type="button">
Back
</button>
</div>
<div class="button__right">
<button type="button">
Next
</button>
</div>
</div>
</div>
</div>
<div class="page-footer">
<nav>
<a href="one">one</a>
<a href="two">two</a>
<a href="three">three</a>
<a href="four">four</a>
</nav>
</div>
</body>
</html>最佳答案
我看不到使用position: absolute和bottom: 0存在什么问题。
.application-layout__container {
margin: 0 auto;
padding: 0 15px;
}
.button__left {
float: left;
}
.button__right {
float: right;
}
.application-layout__button-group {
clear: both;
}
.page-footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #0065bd;
color: #fff;
margin-top: 42px;
}
.page-footer nav {
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 21px 0;
}
.page-footer nav a {
color: #fff;
}
}<html>
<body>
<div>
<div class="application-layout__container">
<div class="application-layout__header">
<h1>
Application
</h1>
</div>
<div class="application-layout__body">
<form>
<div class="form-group">
<label for="input">Input</label>
<input id="input" type="text" />
</div>
</form>
</div>
<div class="application-layout__button-group">
<div class="button__left">
<button type="button">
Back
</button>
</div>
<div class="button__right">
<button type="button">
Next
</button>
</div>
</div>
</div>
</div>
<div class="page-footer">
<nav>
<a href="one">one</a>
<a href="two">two</a>
<a href="three">three</a>
<a href="four">four</a>
</nav>
</div>
</body>
</html>