主页 / 问题 / 806807
Accepted
NTP
Asked:2020-03-30 04:15:52 +0000 UTC2020-03-30 04:15:52 +0000 UTC

基于块高度的页脚样式

  • 772

是否有可能使如果块小于页面窗口的高度（短广告），那么页脚将被压到浏览器窗口的底部，如果块更大并且出现滚动，那么页脚会在这个块的正下方吗？

javascript

1 个回答

  1. Best Answer

    这很容易用 flexbox 作为容器来实现：

    let cntnt = document.getElementById('content'); 
cntnt.addEventListener('click', function () {
  this.innerHTML += '<p>параграф</p>'; 
}); 
    html,
body {
  margin: 0;
  padding: 0;
}

#page {
  height: 100vh; 
  display: flex;
  flex-direction: column; 
  font: 16px sans-serif; 
  color: #fff; 
}

#page > div, 
#content > p {
  padding: 10px; 
  text-align: center; 
}

#page > div { flex 0 0 auto; }

#content { background-color: #44a; }

#footer {
  margin-top: auto; 
  background-color: #4a4;
}
    <div id="page">
  <div id="content">кликайте по этому блоку<br>для увеличения его высоты</div>
  <div id="footer">футер</div>
</div>

    这里的原理很简单：
    容器子元素的垂直方向由flex-direction: column.
    子块的样式flex 0 0 auto“禁用”它们填充可用空间，并在“邻居”大小增加时压缩 - 但同时它允许您自动调整内容的大小。
    对于较小的内容块高度，由于margin-top: auto.

    您可以阅读有关 flexbox 的内容：
    Using CSS Flexible Boxes (MDN)
    A Complete Guide to Flexbox (CSS-Tricks)

    • 10

相关问题