css 上下布局
时间: 2023-07-10 12:04:43 浏览: 78
CSS 上下布局可以使用多种方式实现,以下是其中两种常见的方法:
1. 使用 flex 布局
```html
<div class="container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
```
```css
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
height: 50px;
background-color: #ccc;
}
.main {
flex: 1;
background-color: #eee;
}
.footer {
height: 50px;
background-color: #ccc;
}
```
2. 使用绝对定位
```html
<div class="container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
```
```css
.container {
position: relative;
height: 100vh;
}
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: #ccc;
}
.main {
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
background-color: #eee;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: #ccc;
}
```
以上两种方式都可以实现上下布局,选择哪种方式取决于具体场景和需求。