css header高度固定,body怎么平分剩余高度
时间: 2024-04-21 21:23:05 浏览: 23
你可以使用CSS的flexbox布局来实现这个效果。首先,将父容器的`display`属性设置为`flex`,然后在子容器中设置`flex-grow`属性为`1`,这样子容器会平分父容器中剩余的空间。下面是一个示例代码:
HTML:
```html
<div class="container">
<header>Header</header>
<div class="body">Body</div>
</div>
```
CSS:
```css
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 设置父容器的高度为视口高度 */
}
header {
height: 50px; /* 设置header高度 */
}
.body {
flex-grow: 1; /* 平分剩余空间 */
}
```
在上面的示例中,父容器`.container`的高度被设置为视口高度(`100vh`),这是为了确保页面可以滚动。头部`header`的高度被固定为`50px`,而`.body`会自动填充剩余的空间。你可以根据实际需要调整高度和样式。
相关问题
css有一个父容器里面有顶部固定,中间部分嵌套一个头部固定,剩下部分高度自适应的容器
要实现一个父容器里面有顶部固定,中间部分嵌套一个头部固定,剩下部分高度自适应的容器,可以使用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`,使其填充剩余的空间,并设置一个上边距以为头部留出空间。
你可以根据自己的需求进一步修改样式和内容。希望对你有所帮助!如果还有其他问题,请随时提问。
html页脚固定到底部
要将HTML页面的页脚固定在底部,可以使用CSS中的flex布局。具体实现方法如下:
1. 在HTML页面中添加一个footer标签,用来包含页面的页脚内容。
2. 在CSS中为body元素添加display: flex;属性,使其成为flex容器。
3. 设置flex-direction: column;属性,使容器内的元素垂直排列。
4. 将footer元素的margin-top属性设置为auto,使其自动填充剩余的空间。
5. 为footer元素设置position: fixed; bottom: 0;属性,使其固定在页面底部。
下面是实现代码示例:
HTML代码:
```
<body>
<header>头部内容</header>
<main>主要内容</main>
<footer>页脚内容</footer>
</body>
```
CSS代码:
```
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* 设置最小高度为视口高度 */
}
footer {
margin-top: auto;
position: fixed;
bottom: 0;
width: 100%;
height: 50px; /* 设置页脚高度 */
}
```
这样设置后,无论页面的主要内容高度如何,页脚都会固定在底部。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)