Because I think it is good to share out, the style is directly rough point, embedded.

<div style={{display:"flex",flexDirection:"column",height:'100%'}}>
    <div style={{background:"red",height:'60px'}}>top</div>
    <div style={{background:"white",display:"flex",flex:1,overflowY:"auto"}}>
        <div style={{background:"black",width:"230px",color:"white",overflowY:"auto"}}>
            leftContent
        </div>
    <div style={{overflowY:"auto"}}>
        rightContent
    </div>
    </div>
    <div style={{background:"yellow",height:'60px'}}>bottom</div>
</div>
Copy the code

The main use is flex vertical distribution, not clear to check the Flex layout.

The core point is the style of the middle layer

Flex: 1.Copy the code

This can be done by spreading out the content layer in the middle (adaptive). The interface is as follows: