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

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

时间: 2024-04-18 21:25:20 浏览: 74

可以通过使用 CSS 的定位属性来实现父容器顶部固定，中间部分嵌套一个头部固定，剩下部分高度自适应的容器。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> /* 设置父容器为固定定位，并将顶部固定在页面顶部 */ .parent-container { position: fixed; top: 0; width: 100%; } /* 设置头部固定在父容器中间 */ .header { position: sticky; top: 0; background-color: #f1f1f1; padding: 10px; } /* 设置剩下部分为自适应高度的容器 */ .content { padding-top: 50px; /* 为头部留出空间 */ } </style> </head> <body> <div class="parent-container"> <div class="header"> <h1>头部内容</h1> </div> </div> <div class="content"> <h2>主要内容</h2> <p>这里是主要内容，高度会自适应。</p> </div> </body> </html> ``` 在上面的代码中，`.parent-container` 类设置了固定定位，并将顶部固定在页面顶部。`.header` 类设置了粘性定位（sticky positioning），使其在父容器内固定在顶部。`.content` 类设置了一个上边距，以便为头部留出空间，并使其高度自适应。你可以根据自己的需求进一步修改样式和内容。希望对你有所帮助！如果还有其他问题，请随时提问。

阅读全文