HTML底部對齊是一種布局技巧,可以讓頁面布局更加美觀、整齊。底部對齊的實現方法主要是通過CSS樣式來控制,但是在HTML中也有相應的代碼可以使用。在HTML中,我們可以使用“”標簽來表示代碼段,并通過該標簽實現底部對齊。
<style> html, body { height: 100%; } .wrapper { min-height: 100%; margin-bottom: -50px; /* 底部留出一定空間 */ } .footer, .push { height: 50px; /* 底部區域高度 */ } </style> <div class="wrapper"> <p>頁面內容</p> <div class="push"></div></div> <div class="footer"> <p>底部內容</p> </div>
如上代碼所示,我們為頁面添加了一個包含“頁面內容”與“底部內容”的
元素。通過設置wrapper的最小高度為100%和margin-bottom為負底部區域高度,我們就可以實現底部對齊的效果。
需要注意的是,底部留白的高度應與底部區域的高度相等,才能保證實現底部對齊的效果。
上一篇html底部固定代碼
下一篇vue cinemas