实现div可以调整高度（div实现resize）


一、div 实现resize（类似textarea）

　　代码如下：

<!DOCTYPE html>

<html>

  <head>

    <title>div实现textarea效果</title>

    <style>

      #textarea {

        height: 200px;

        width: 300px;

        padding: 4px;

        border: 1px solid #888;

        resize: vertical;

        overflow: auto;

      }

      #textarea:empty:before {

        content: attr(placeholder);

        color: #bbb;

      }

    </style>

  </head>

  <body>

    <div id="textarea" contenteditable="true" placeholder="请输入内容..."></div>

  </body>

</html>

二、监听div的resize事件

<!DOCTYPE html>

<html>

  <head>

    <title>div监听resize事件</title>

    <style>

      .container {

        position: relative;

        width: 500px;

        height: 300px;

        background-color: black;

        padding: 4px;

        resize: vertical;

        overflow: auto;

      }

      .size-watch {

        width: 100%;

        height: 100%;

        position: absolute;

        visibility:hidden;

        margin: 0;

        padding: 0;

        border: 0;

      }

    </style>    

  </head>

  <body >

    <div class="container" id="mapDiv" >

        hello

    </div>

        <script>

        function riseze (el, cb) {

            // 创建iframe标签，设置样式并插入到被监听元素中

            var iframe = document.createElement('iframe');

            iframe.setAttribute('class', 'size-watch');

            el.appendChild(iframe);

            // 记录元素当前宽高

            var oldWidth = el.offsetWidth;

            var oldHeight = el.offsetHeight;

            // iframe 大小变化时的回调函数

            function sizeChange () {

                // 记录元素变化后的宽高

                var width = el.offsetWidth;

                var height = el.offsetHeight;

                // 不一致时触发回调函数 cb，并更新元素当前宽高

                if (width !== oldWidth || height !== oldHeight) {

                    cb({width: width, height: height}, {width: oldWidth, height: oldHeight});

                    oldWidth = width;

                    oldHeight = height;

                }

            }

            // 设置定时器用于节流

            var timer = 0;

            // 将 sizeChange 函数挂载到 iframe 的resize回调中

            iframe.contentWindow.onresize = function () {

                clearTimeout(timer);

                timer = setTimeout(sizeChange, 20);

            };

        }

        //var el = document.getElementById("mapDiv");

        var el = document.querySelector('.container');

        riseze(el, (val, oldVal) => {

            console.log(`size changed！new: ${JSON.stringify(val)}, old: ${JSON.stringify(oldVal)}`);

        });

    </script>

  </body>

</html>

参考网站：

1、https://blog.csdn.net/liya_nan/article/details/81742370

2、https://segmentfault.com/a/1190000016550156

实现div可以调整高度（div实现resize）的更多相关文章

  1. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  2. div中iframe高度自适应问题

    网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...

  3. 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

  4. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

  5. 前端页面div float 后高度 height 自适应的问题

    最近在画项目页面的时候遇到了一个左侧div一旦加上float:left 属性后,设置其高度height:100% 不起作用,后来网上查了半天也没有找到很好的解决方案,只在csdn里发现了这个马上记录下 ...

  6. DIV+CSS常见问题：DIV如何设置一个像素高度？

    CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...

  7. Chrome&FF&Opera&下DIV不设置高度显示背景颜色和边框的办法

    今天在排版的时候,外层的div不写高度的话背景颜色和边框没法办法显示,但是在IE下面就可以,这个有三个解决办法. 第一: 直接给最外层的div设置高度(不推荐). 第二: 在内部每个div后添加一个清 ...

  8. div有最小高度且自适应高度

    DIV最小高度且自适应高度   在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可.但是在IE7和firefox就不行了,它不会自动撑 ...

  9. div没有设置高度时背景颜色不显示(浮动)

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. ...

随机推荐

  1. <JavaScript>如何阅读《JavaScript高级程序设计》（一）

    题外话 最近在看<JavaScript高级程序设计>这本书,面对着700多页的厚书籍,心里有点压力,所以我决定梳理一下..探究一下到底怎么读这本书.本书的内容好像只有到ES5...所以只能 ...

  2. 传统Web应用请求和响应特点【显示当前时间】

    (1)请求:浏览器以HTTP协议的方式提交请求到服务器 (2)响应:服务器以HTTP协议的方式响应内容到浏览器 注意:HTTP是WEB大众化非安全协议 HTTPS是WEB安全协议,是基于HTTP协议的 ...

  3. 使用注解实现Spring的声明式事务管理

    使用注解实现Spring的声明式事务管理,更加简单! 步骤: 1) 必须引入Aop相关的jar文件 2) bean.xml中指定注解方式实现声明式事务管理以及应用的事务管理器类 3)在需要添加事务控制 ...

  4. VBA读写XML文件

    'Write XML file Sub WriteXML(fpa$, fn$) Dim xmlfile As String xmlfile = ThisWorkbook.Path & &quo ...

  5. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-3.热部署在Eclipse和IDE里面的使用

    笔记 3.热部署在Eclipse和IDE里面的使用     简介:讲解热部署的好处及使用注意事项,在eclipse里面默认开启,在IDE里面默认关闭                  1.增加依赖 & ...

  6. idea设置包的导入和提示重复代码下波浪线

    1.一般idea都不会导入包.即使按了(以下都是已eclipse设置idea的快捷键) alt+enter键也不能导入. 2.关闭重复代码提示(也就是重复代码有波浪线)

  7. [转]SQL server 2008R2 中 C#Winfoirm 使用 SqlDependency 机制实现 数据库中某一张表的监视

    转自:https://blog.csdn.net/u012183487/article/details/77776930 System.Data.SqlClient命名空间下的 sqlDependen ...

  8. phoenix创建表失败：phoenixIOException: Max attempts exceeded

    下面的问题,搞了1天才解决,太坑了,在这里记录一下. 问题现像:执行命令后,1分钟没有返回, 然后报下面的错,偶尔会出现以下不同的报错信息. jdbc:phoenix:10.0.xx.1:2181&g ...

  9. java-创建对象实例

    1.A a = new A(); 2.Class class = B.Class; B b = class .newInstance();

  10. 修改主机名(/etc/hostname和/etc/hosts区别)

    ubuntu永久修改主机名 1.查看主机名 在Ubuntu系统中,快速查看主机名有多种方法:其一,打开一个GNOME终端窗口,在命令提示符中可以看到主机名,主机名通常位于“@”符号后:其二,在终端窗口 ...