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

背景

• 代码如下：

 <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