最近做个人项目的时候碰到了dvh单位的一个奇怪问题，想跟大家请教下——我需要一个占位div来让页面内容不足时footer固定在屏幕底部，这个问题每次碰到都头疼，明明看起来简单，实际折腾起来却麻烦。

我用了flexbox布局，给body设置了96dvh的高度，再加上上下各2dvh的padding，加起来刚好是100dvh。内容不够填满视口的时候，这个方案工作得很正常；但当内容多到需要滚动时，滚到页面底部会发现padding-bottom完全不显示，但padding-top是正常的。我用Chrome的开发者工具检查过，确实能看到padding-bottom的计算值是存在的，但就是看不到效果。

这是预期行为吗？我试着去查动态视口单位的文档和相关文章，但因为对CSS的底层逻辑理解不够深，实在搞不懂为什么会这样。

大家可以运行下面的代码片段，点击输出窗口来切换内容的有无，就能看到两种场景的差异：

JavaScript 代码 #

document.body.addEventListener('click', function() {
  const elem = document.getElementById("aid");
  if( elem.innerHTML == "" ) {
    elem.innerHTML = "Some long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie metus ac nunc hendrerit suscipit. Aenean convallis accumsan gravida. Ut lobortis turpis ut orci efficitur, at eleifend arcu ultricies. Ut tempus eget neque efficitur auctor. Donec sagittis, augue et rhoncus vulputate, purus sem malesuada elit, id rhoncus dolor nulla placerat velit. Suspendisse purus quam, consequat quis turpis ut, tempor elementum nulla. Pellentesque nibh risus, aliquet sit amet felis placerat, lobortis vehicula nisl. Sed convallis turpis sodales ligula egestas, a ultrices libero ultrices. Sed in ipsum urna. Suspendisse aliquet mollis enim. Aliquam mollis est vitae dignissim finibus. Sed nulla tortor, ultricies eget aliquet a, consectetur at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales ligula eget lacus maximus, ut suscipit augue tristique. Phasellus ac tortor dolor. Etiam ornare tempor semper. Fusce rutrum arcu a est iaculis varius. Curabitur libero augue, bibendum non leo sit amet, malesuada blandsse purus quam, consequat quis turpis ut, tempor elementum nulla. Pellentesque nibh risus, aliquet sit amet felis placerat, lobortis vehicula nisl. Sed convallis turpis sbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales ligula eget lacus maximus, ut suscipit augue tristique. Phasellus ac tortor dolor. Etiam ornare tempor semper. Fusce rutrum arcu a est iaculis varius. Curabitur libero augue, bibendum non leo sit amet, malesuada blandsse purus quam, consequat quis turpis ut, tempor elementum nulla. Pellentesque nibh risus, aliquet sit amet felis placerat, lobortis vehicula nisl. Sed convallis turpis sodales ligula egestas, a ultrices libero ultrices. Sed in ipsum urna. Suspendisse aliquet mollis enim. Aliquam mollis est vitae dignissim finibus. Sed nulla tortor, ultricies eget aliquet a, consectetur at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales ligula eget lacus maximus, ut suscipit augue tristique. Phasellus ac tortor dolor. Etiam ornare tempor semper. Fusce rutrum arcu a est iaculis varius. Curabitur libero augue, bibendum non leo sit amet, malesuada blandit nunc. Maecenas pulvinar ligula et arcu feugiat egestas. Nunc quis viverra ante. Donec purus augue, iaculis a dui ut, ullamcorper viverra massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam elementum ipsum nunc, quis dictum massa convallis quis. Morbi neque risus, mattis sodales lobortis eu, iaculis a sapien. Suspendisse aliquet mollis enim. Aliquam mollis est vitae dignissim finibus. Sed nulla tortor, ultricies eget aliquet a, consectetur at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales ligula eget lacus maximus, ut suscipit augue tristique. Phasellus ac tortor dolor. Etiam ornare tempor semper. Fusce rutrum arcu a est iaculis varius. Curabitur libero augue, bibendum non leo sit amet, malesuada blandit nunc. Maecenas pulvinar ligula et arcu feugiat egestas. Nunc quis viverra ante. Donec purus augue, iaculis a dui ut, ullamcorper viverra massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam elementum ipsum nunc, quis dictum massa convallis quis. Morbi neque risus, mattis sodales lobortis eu, iaculis a sapien.";
  }
  else {
    elem.innerHTML = "";
  }
}, true);

CSS 代码 #

body {
  margin: 0;
  height: 96dvh;
  /* here */ padding: 2dvh 0;
  
  display: flex;
  flex-direction: column;
}

.fill {
  background-color: green;
  flex-grow: 1;
}

.header, .footer {
  background-color: red;
  color: white;
  padding: 1rem;
}

HTML 代码 #

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="header">Header</div>
  <div id=aid></div>
  <div class="fill"></div>
  <div class="footer">Footer</div>
</body>

另外dvw单位好像也有类似的问题，只是用例比较少。

备注：内容来源于stack exchange，提问作者ioannis-kokkalis