HTML底部對齊是一種布局技巧，可以讓頁面布局更加美觀、整齊。底部對齊的實(shí)現(xiàn)方法主要是通過CSS樣式來控制，但是在HTML中也有相應(yīng)的代碼可以使用。在HTML中，我們可以使用“”標(biāo)簽來表示代碼段，并通過該標(biāo)簽實(shí)現(xiàn)底部對齊。
<style>
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px; /* 底部留出一定空間 */
}
.footer,
.push {
height: 50px; /* 底部區(qū)域高度 */
}
</style>
<div class="wrapper">
<p>頁面內(nèi)容</p>
<div class="push"></div></div>
<div class="footer">
<p>底部內(nèi)容</p>
</div>如上代碼所示，我們?yōu)轫撁嫣砑恿艘粋€(gè)包含“頁面內(nèi)容”與“底部內(nèi)容”的
元素。通過設(shè)置wrapper的最小高度為100%和margin-bottom為負(fù)底部區(qū)域高度，我們就可以實(shí)現(xiàn)底部對齊的效果。
需要注意的是，底部留白的高度應(yīng)與底部區(qū)域的高度相等，才能保證實(shí)現(xiàn)底部對齊的效果。
上一篇html底部固定代碼
下一篇vue cinemas