CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度

如题:顶部底部固定高度,中间部分铺满屏幕剩余高度,中间盒子里又左盒子固定宽度,右盒子自适应宽度且距左盒子总是20px

主要解决方法是中间盒子的top:40px;bottom:40px;设置。原理是在position是absolute时同时设置top和bottom或者同时设置left和right,高度或宽度会被拉伸到指定位置

如图:

CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度_第1张图片

实现代码:

 

 



    
    
    


顶部,高度40px
左盒子,固定宽度200px,高度自适应铺满屏幕剩余高度
右盒子,距离左盒子20px,高度自适应宽度自适应铺满屏幕剩余高度
底部,高度40px

 

 

 

你可能感兴趣的:(web前端)