首页一个div高度百分百，head占60px,剩下的高度平均分成两份

一个div高度百分百，head占60px,剩下的高度平均分成两份

时间: 2024-12-18 09:36:15 浏览: 6

在CSS布局中，如果你想要一个`<div>`元素占据剩余浏览器窗口的高度，并将头部（通常包含`<header>`元素，高60像素）固定，其余部分平分给两个子区域，你可以这样做： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> body { margin: 0; padding: 0; } header { height: 60px; /* 定义头部高度 */ background-color: lightgray; padding: 1rem; /* 可选的内边距 */ } .content-container { display: flex; /* 使用 Flexbox 布局 */ min-height: calc(100vh - 60px); /* 计算剩余视口高度 */ } .left-content, .right-content { flex: 50%; /* 两边内容各占50% */ background-color: lightblue; /* 示例颜色 */ } </style> </head> <body> <header>头部信息</header> <div class="content-container"> <div class="left-content">左侧内容</div> <div class="right-content">右侧内容</div> </div> </body> </html> ``` 在这个例子中，`.content-container` 使用了 Flexbox 的 `display: flex` 属性，设置了最小高度为 `calc(100vh - 60px)` 来适应头部的高度。`.left-content` 和 `.right-content` 分别占用了总宽度的50%，实现了内容的平分。

阅读全文