利用插槽实现简单页面上中下布局
时间: 2024-05-05 15:21:34 浏览: 11
可以使用 HTML 和 CSS 来实现简单页面上中下布局,其中可以使用插槽来实现以下布局:
```
<!DOCTYPE html>
<html>
<head>
<title>中下布局</title>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 100px;
background-color: #ccc;
}
.main {
flex-grow: 1;
background-color: #eee;
}
.footer {
height: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
</body>
</html>
```
在上面的代码中,`.container` 类设置为 `display: flex;`,以便其子元素(即 `.header`、`.main` 和 `.footer`)可以使用 Flexbox 布局。`.main` 类设置为 `flex-grow: 1;`,以便它会自动填充剩余的空间。这样就实现了简单的中下布局。