css經典佈局——頭尾固定高度中間高度自適應佈局

時間 2019-12-18

標籤 css 經典佈局頭尾固定高度中間自適應欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>頭尾固定中間高度自適應佈局</title> <style> html, body { height: 100%; margin: 0; padding: 0 } #dHead { height: 100px; line-height: 100px; background: #690; width: 100%; position: absolute; z-index: 5; top: 0; text-align: center; } #dBody { background: #FC0; width: 100%; overflow: auto; top: 100px; position: absolute; z-index: 10; bottom: 100px; } #dFoot { height: 100px; line-height: 100px; background: #690; width: 100%; position: absolute; z-index: 200; bottom: 0; text-align: center; } </style> </head> <body> <div id="dHead">固定頭部100px;</div> <div id="dBody"> 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 中間自適應部分 </div> <div id="dFoot">固定尾部100px</div> </body> </html>