让el-col的高度占满父元素
时间: 2023-07-12 17:14:13 浏览: 683
可以使用 `height: 100%` 和 `box-sizing: border-box` 来让 el-col 的高度占满父元素,示例如下:
```html
<div style="height: 500px;">
<el-row>
<el-col :span="24" style="height: 100%; box-sizing: border-box;"></el-col>
</el-row>
</div>
```
这样 el-col 的高度就会占满父元素的高度。需要注意的是,父元素的高度必须是固定的,不能是自适应的,否则 el-col 的高度无法被计算出来。
相关问题
el-col24占满el-select只占了一半
你可以尝试将`el-col`元素的宽度设置为24,并将其包裹在一个`el-row`元素中。然后,将`el-select`元素的宽度设置为100%。这样就能让`el-select`元素占满整个`el-col`元素了。以下是示例代码:
```html
<el-row>
<el-col :span="24">
<el-select style="width: 100%;">
<!-- 你的选项 -->
</el-select>
</el-col>
</el-row>
```
通过以上的代码,`el-col`会占满一行的宽度,而`el-select`则会占满整个`el-col`的宽度。这样就能实现`el-select`完全占据`el-col`的效果了。希望对你有所帮助!
el-row el-col高度
根据引用的内容,grid-gap属性设置的元素间距是不包含在自动分配的空间里面的。因此,在使用grid布局时,按比例分配的宽度是按照width 100%而不是width - gap(n-1)。所以,如果要让宽度适应,应该在父元素接收到gap值后减去再分配。
根据引用的代码片段,你正在使用grid布局,设置了三行三列的元素,并且每个元素的宽度和高度都是33%,并且设置了grid-gap属性来定义元素之间的间距。在这种情况下,el-row和el-col的高度将根据父元素的高度自动调整,因为它们没有明确设置高度。所以,el-row和el-col的高度将根据父元素的高度和元素之间的间距进行自动分配。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* *2* [Grid布局实现el-row/el-col](https://blog.csdn.net/shwwns/article/details/110097035)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]