CSS中間自適應(yīng)高度的實(shí)現(xiàn),可以使用flex布局或者table布局來(lái)實(shí)現(xiàn)。以下是兩種方法的代碼示例。
/* flex布局實(shí)現(xiàn) */ .container { display: flex; /* 設(shè)置容器為flex布局 */ flex-direction: column; /* 設(shè)置容器內(nèi)項(xiàng)目為垂直方向 */ justify-content: center; /* 設(shè)置項(xiàng)目在垂直方向上居中對(duì)齊 */ align-items: center; /* 設(shè)置項(xiàng)目在水平方向上居中對(duì)齊 */ height: 100vh; /* 設(shè)置容器高度為視口高度 */ } .content { flex: 1; /* 設(shè)置內(nèi)容部分為自適應(yīng)高度,即占據(jù)除了header和footer之外的高度 */ } /* table布局實(shí)現(xiàn) */ .container { display: table; /* 設(shè)置容器為table布局 */ width: 100%; /* 設(shè)置容器寬度為100% */ height: 100vh; /* 設(shè)置容器高度為視口高度 */ table-layout: fixed; /* 設(shè)置容器中每個(gè)列的寬度固定 */ } .header, .footer { display: table-row; /* 設(shè)置header和footer為table的一行 */ height: 50px; /* 設(shè)置header和footer的高度為50px */ } .content { display: table-row; /* 設(shè)置內(nèi)容部分為table的一行 */ }
使用這兩種方法都可以實(shí)現(xiàn)中間自適應(yīng)高度的效果,根據(jù)實(shí)際需求選擇一種使用即可。
上一篇css主欄側(cè)欄
下一篇ajax中.get的傳值