div设置高度自适应?

怎样让一个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后面加上?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

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

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

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

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