css上中下高度自适应屏幕

CSS中的高度自适应是网页设计中非常重要的一部分，尤其是针对不同的屏幕尺寸，如何使页面元素高度自适应显得尤为重要。

在对于上、中、下三行的布局进行高度自适应时，需要使用CSS中的position属性来进行定位。

.top{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20%;
}

.middle{
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    height: 60%;
}

.bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
} 

以上代码中，.top表示页面的上部分，.middle表示页面的中间部分，.bottom表示页面的下部分。通过position属性可以实现元素的定位，再通过top、left、right、bottom等属性来定位元素的位置。

对于每个部分的高度，通过将页面的高度分为20%、60%和20%三个部分，来实现根据屏幕大小的自适应。

除此之外，还需要注意对于父元素的height属性设置为100%以铺满整个页面，才能正确实现高度自适应的效果。

.parent{
    height: 100%;
    position: relative;
} 

综上所述，高度自适应是页面设计中非常重要的一部分，解决屏幕尺寸不一的问题，能够让页面显得更加美观和易于操作。