页头固定，页脚也是固定的，但中间那一块区域怎么自适应高度？

图片说明我设置了固定高度，但这样做屏幕一大或者小明显就会出现问题，请问怎么让这块区域自适应高度，下至页脚，自动到底

中间区域 高度不要写死。 上下用 padding, margin,或者设置伪类占位就行了吧。。

height:100%;

你可以试试设置min-height来设置个最小的高度

中间部分用flex:1填充

比如

<body>
    <header></header>
<main></main>
<footer></footer>
</body>
<style>
    body{
    display:flex;
    flex-direction: column
    }
    header{
        height:25px;
    }
    main{
    flex:1;
    }
    footer{
    height:20px;
    }
</style>

差不多了 ，