css头部固定,内容区域高度自适应剩余的屏幕高度,内容区域过多显示竖向滚动条
网页布局,头部高度为60px,内容区域我想随着屏幕的高度自适应,设置为flex为1。内容区域只占据剩余的屏幕,如果内容区域超出了剩余的屏幕高度就展示滚动条,设置样式如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"> <style> html, body { height: 100%; /* 关键:继承视口高度 */ margin: 0; /* 清除默认边距 */ padding: 0; } body { display: flex; /* 启用flex布局 */ flex-direction: column; /* 垂直排列子元素 */ min-height: 100vh; /* 确保至少撑满视口高度 */ } .header { height: 60px; /* 固定头部高度 */ background: #f0f0f0; } .content { flex: 1; /* 占据剩余空间 */ overflow-y: auto; /* 超出时显示滚动条 */ padding: 20px; background: #fff; } </style> </head> <body> <div class="header">Header</div> <div class="content"> <ul> <li>11111</li> <li>11111</li> <li>11111</li> <!-- ...... --> </ul> </div> </body> </html>