search

imguolao / monaco-vue

Use monaco-editor loaded from CDN in Vue 2&3, no need to bundling.
https://imguolao.github.io/monaco-vue/
MIT License
234 stars 21 forks source link

请教下，如何设置 max-height ? #62

Closed Su-yj closed 2 weeks ago

imguolao commented 6 months ago

组件内部的 height 都是默认 100% 的，外层容器设置 max-height 就可以了

Su-yj commented 5 months ago

我试了貌似不行，最外层的容器没有设置高度，中间层容器设置了 max-height，然后再包一个 vue-monaco-diff-editor，但是由于外面两层的容器都没有指定高度，由内容撑开，而 vue-monaco-diff-editor 的高度好像并没有由内容撑开，导致高度变为 0 了。

需要我在外层容器设置了一个高度，再中间层容器再设置 max-height，或者直接 vue-monaco-diff-editor 设置 max-height 才生效

imguolao commented 5 months ago

这是个 css 问题，容器不设置固定高度，只设置 max-heigth，子元素没有高度是撑不起来的，而 diff-editor 是默认 100%，你父级没有高度，则子元素也没有高度。

gzq0616 commented 4 months ago

我也遇到这个问题，当父容器为modal时，打开modal，vue-monaco-editor高度无法自适应

imguolao commented 4 months ago

我也遇到这个问题，当父容器为modal时，打开modal，vue-monaco-editor高度无法自适应

需要给容器一个固定的高度

Su-yj commented 3 months ago

主要是有时候，如果我能给外面的容器固定高度，我就不需要设置max-heigth了，感觉这css的样式有时候很矛盾

imguolao commented 3 months ago

主要是有时候，如果我能给外面的容器固定高度，我就不需要设置max-heigth了，感觉这css的样式有时候很矛盾

这是经典 css 高度坍塌问题，你用 flex 撑起来也可以的

Su-yj commented 3 months ago

不知道这个 max-height 能否增加到组件中配置呢？

imguolao commented 3 months ago

不知道这个 max-height 能否增加到组件中配置呢？

组件只有内外两个 div 套着，外层 div 可以直接在组件上用 style 或 class 覆盖，内层 div 有一个组件配置 className 可以绑定 class。

应该不需要特意加一个 max-height 配置。