首页css有一个父容器里面有顶部固定，中间部分嵌套一个头部固定，剩下部分高度自适应的容器

css有一个父容器里面有顶部固定，中间部分嵌套一个头部固定，剩下部分高度自适应的容器

时间: 2024-04-18 16:25:16 浏览: 69

要实现一个父容器里面有顶部固定，中间部分嵌套一个头部固定，剩下部分高度自适应的容器，可以使用CSS的flexbox布局。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> /* 设置父容器为flex布局，并垂直排列 */ .parent-container { display: flex; flex-direction: column; height: 100vh; /* 设置高度为视口的高度 */ } /* 设置头部固定在顶部 */ .header { position: fixed; top: 0; width: 100%; background-color: #f1f1f1; padding: 10px; } /* 设置剩下部分为自适应高度的容器 */ .content { flex-grow: 1; /* 填充剩余空间 */ padding-top: 50px; /* 为头部留出空间 */ } </style> </head> <body> <div class="parent-container"> <div class="header"> <h1>头部内容</h1> </div> <div class="content"> <h2>主要内容</h2> <p>这里是主要内容，高度会自适应。</p> </div> </div> </body> </html> ``` 在上面的代码中，`.parent-container` 类设置了flex布局，并设置高度为视口的高度（`100vh`），这样可以使容器占满整个屏幕。`.header` 类设置了固定定位，使其在父容器内固定在顶部。`.content` 类设置了`flex-grow: 1`，使其填充剩余的空间，并设置一个上边距以为头部留出空间。你可以根据自己的需求进一步修改样式和内容。希望对你有所帮助！如果还有其他问题，请随时提问。

阅读全文