超过屏幕高度没有滚动条解决方案

目录

• • 背景
  • 解决方案
  • 参考

背景

• 代码如下：

 <div class="parent">
    <div class="head"></div>
    <div class="content"></div>
</div>

• content代码块超出屏幕高度却没有滚动条。

解决方案

• 我开始想过先用JS拿到head块的高度，然后屏幕总高度 减 head块的高度。用JS的方法设置content块的高度。
• 但我更倾向于CSS的解决方案，后面找的了还不错的方案。网格布局 列布局 加设置屏幕高度。代码如下：

 .parent{
  display: flex;
  flex-direction: column;
  height: 100vh; // 我使用100%也能达到效果
}

.head {
 
}

.content{
 
}

参考

• https://segmentfault.com/q/1010000021601901