网页布局，头部高度为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>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。