给我个4个方法不同的示例
时间: 2024-03-24 07:36:42 浏览: 7
好的,以下是4个不同的示例:
1. 使用flexbox布局
HTML代码:
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```
CSS代码:
```css
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.item {
height: 100%;
}
```
2. 使用绝对定位
HTML代码:
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```
CSS代码:
```css
.container {
position: relative;
height: 100vh;
}
.item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
```
3. 使用calc函数
HTML代码:
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```
CSS代码:
```css
.container {
height: 100vh;
}
.item {
height: calc(100% - 50px);
}
```
4. 使用grid布局
HTML代码:
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```
CSS代码:
```css
.container {
display: grid;
grid-template-rows: 1fr 2fr 3fr;
height: 100vh;
}
.item {
height: 100%;
}
```
以上是4个不同的示例,分别使用了flexbox布局、绝对定位、calc函数和grid布局来让CSS容器填满剩余的高度。