vue中的可编辑div实现高度自适应

根据需求想要一个可以根据文字内容撑开高度，同时延伸背景图（因为我想要一个虚线的效果），textarea无法自适应，用div的可编辑效果contenteditable = true来实现，遇到了几个问题。

1、设置div的初始化高度min-height: 700px

2、div的内容需要通过@input来绑定e.target.textContent

3、可编辑的div，光标会在输入完成时跳到最前，解决方式是通过range对象的moveStart()函数

在最后一个div 后面加上 overflow:hidden如下：

<div style="width:580pxheight:automargin:0 auto

<div style="height:100pxwidth:230pxfloat:leftmargin:20px"></div>

<div style="height:100pxwidth:230pxfloat:leftmargin:20px"></div>

<div style="height:100pxwidth:230pxfloat:leftmargin:20px"></div>

<div style="clear:bothheight:1pxwidth:100%overflow:hiddenmargin-top:-1px"></div>

</div>

扩展资料

DIV height与DIV自适应高度

1、在div标签内使用style属性即可设置此DIV盒子高度样式。

<div style="height:50px">我高度为50px</div>

解释：以上通过div标签的style属性样式设置height高度样式。

2、外部样式设置指定div盒子高度

此方法是常用的标签外部CSS样式设置对象样式法。可以通过将CSS代码写入CSS文件，再通过HTML引入CSS文件即可使用；也可以直接在HTML源代码内使用style标签设置CSS样式代码。

这里为大家演示html网页源代码内使用style标签设置外部CSS样式。

为了观察效果本div高度height实例，对象div命名为“.divcss5”，宽度为150px，height为80px，css边框为1px蓝色

DIV+CSS小例CSS代码：

<style>

.divcss5{ height:80px width:150px border:1px solid #00F}

</style>

这个方法就大致分为两种吧，

第一种，用CSS的方法

第二种，用JS方法

这里暂时只演示第一种，如果第二种，另外@我

示例代码如下：

CSS代码第一种写法

html,body{height:100%margin:0}/**把HTML和BODY的高度设置成100%**/

div{height:100%background-color:#ccc}/**把你DIV的高度设置成100%**/

CSS代码第二种写法

div{height:100%position:absolutewidth:100%background-color:#cccleft:0top:0}

这里用到position:absolute 所以HTML和BODY不需要设置100%

---