div设置高度自适应?
发布网友
发布时间：2024-10-23 07:58
共1个回答
热心网友
时间：2024-10-26 13:56
div默认就是自适应高度，随内容的高度增加，也可以使用样式：style.div{height:auto;}/style来定义自适应
怎样让一个div高度自适应浏览器高度
这个方法就大致分为两种吧，
第一种，用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:absolute;width:100%;background-color:#ccc;left:0;top:0;}
这里用到position:absolute;所以HTML和BODY不需要设置100%
大div套多个小div，怎样设置外div的高度自适应？在最后一个div后面加上?overflow:hidden;如下：
divstyle="width:580px;height:auto;margin:0auto;
divstyle="height:100px;width:230px;float:left;margin:20px"/div
divstyle="height:100px;width:230px;float:left;margin:20px"/div
divstyle="height:100px;width:230px;float:left;margin:20px"/div
divstyle="clear:both;height:1px;width:100%;overflow:hidden;margin-top:-1px;"/div
/div
扩展资料
DIVheight与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
vue中的可编辑div实现高度自适应根据需求想要一个可以根据文字内容撑开高度，同时延伸背景图（因为我想要一个虚线的效果），textarea无法自适应，用div的可编辑效果contenteditable=true来实现，遇到了几个问题。
1、设置div的初始化高度min-height:700px;
2、div的内容需要通过@input来绑定e.target.textContent
3、可编辑的div，光标会在输入完成时跳到最前，解决方式是通过range对象的moveStart()函数
