给el-card设置高为自动,当内部有元素时可以自动撑高,但是最大只能到60vh,超过60vh后设置为overflow:auto
时间: 2023-11-14 21:04:21 浏览: 36
你可以使用CSS的calc()函数和min()函数来实现这个效果。以下是一个示例代码:
```html
<el-card class="card">
<div class="content">
<!-- 这里放置你的元素 -->
</div>
</el-card>
```
```css
.card {
height: auto;
max-height: 60vh;
overflow: hidden;
}
.content {
height: calc(100% - 20px); /* 减去padding的高度 */
overflow: auto;
}
```
在这个代码中,我们通过给 `el-card` 元素设置 `height: auto`,让它可以根据内部元素的高度自动撑高。然后,我们使用 `max-height` 属性将最大高度限制为60vh。如果内容超过了60vh,那么就会出现滚动条。
接下来,我们给 `el-card` 的内部元素 `.content` 设置一个高度。我们使用 `calc()` 函数来计算 `.content` 的高度,其中 `100%` 表示占满父元素的高度,`- 20px` 表示减去 `.content` 的上下padding的高度,这样就保证了内容不会被遮挡。最后,我们给 `.content` 设置 `overflow: auto`,当内容超过 `.content` 的高度时,就会出现滚动条。
相关问题
给el-card设置高为自动,当内部有元素时可以自动撑高,但是最大只能到60vh,超过60vh,内部元素设置overflow:auto
可以通过设置 CSS 属性 `max-height` 来限制 `el-card` 的最大高度为 `60vh`,同时在内部元素中添加 `overflow:auto` 实现滚动条的出现。示例代码如下:
```css
.el-card {
max-height: 60vh;
}
.el-card__body {
overflow: auto;
}
```
这样当 `el-card` 内部的元素高度超过了 `60vh`,就会出现滚动条,否则 `el-card` 的高度会自适应内部元素的高度。注意需要将 `overflow` 属性设置在 `el-card__body` 上,而不是直接在 `el-card` 上设置。
body { /* 设置高为视口高度 */ height: 100vh; display: flex; justify-content: center; align-items: center; /* 设置背景径向渐变 */ background: linear-gradient(red, pink, yellow, skyblue); }背景为啥不显示
根据你提供的代码,设置背景为径向渐变的方式是正确的。但是,有一种可能是你没有给 `<body>` 元素设置高度。在你的代码中,你给 `<body>` 元素设置了 `display: flex;` 和 `justify-content: center; align-items: center;`,这些属性可以让内容在视口中居中对齐。然而,如果 `<body>` 元素没有具体的高度,背景颜色是不会显示出来的。
你可以尝试给 `<body>` 元素添加一个具体的高度值,例如 `height: 100vh;`,这将使 `<body>` 元素的高度等于视口的高度。这样背景颜色就应该显示出来了。