全屏布局

float

  • float+calc
    通过calc()函数计算出.middle元素的高度,并设置子元素高度为100%


top

left

right

bottom

  • float + absolute + (fix)
    通过增加结构来提高兼容性,.middle元素设置100%的高度,.top和.bottom设置absolute覆盖在.middle上


top

left

right

bottom

inline-block

  • inline-block + calc


top

left

right

bottom

  • inline-block + absolute + (fix)


top

left

right

bottom

table



top

left

right

bottom

absolute



top

left

right

bottom

flex



top

left

right

bottom

grid



top

left

right

bottom

点击查看原文

你可能感兴趣的:(全屏布局)