css上下布局高度自适应

在Web开发中，我们常常需要实现一个上下布局，上面是一个固定高度的导航栏或banner，下面是内容区域。但是，当内容区域高度超出一屏时，页面的布局就会出现问题。这时，我们就需要使用CSS来实现上下布局高度自适应。

实现上下布局高度自适应，可以使用flex布局或者计算高度的方法。下面是使用计算高度的方法：

/* 设置导航栏固定高度，留出空间给内容区域 */
header {
  height: 100px;
  background-color: #333;
  color: #fff;
  text-align: center;
}
 
/* 设置内容区域最小高度为100%减去导航栏高度 */
main {
  min-height: calc(100% - 100px);
  background-color: #fff;
} 

上面代码中，我们通过CSS的calc()函数计算出内容区域最小高度为100%减去导航栏高度，这样就保证了内容区域的最小高度为一屏高度。

需要注意的是，如果页面中含有绝对定位元素，就需要加上padding-top或margin-top，以保证绝对定位元素不遮挡上面的导航栏。

实现上下布局高度自适应可以让页面在不同尺寸的屏幕上显示效果一致，增强了页面的可用性和美观性。以上就是使用CSS实现上下布局高度自适应的方法。