实现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. ng build --aot 与 ng build --prod

    angluar的编译有以下几种方式: ng build  常规的压缩操作    代码体积最大 ng build --aot   angular预编译      代码体积较小 ng build --pr ...

  2. 10 Best Practices for Better RESTful API

    转自 http://www.cnblogs.com/mondol/p/6109024.html

  3. centos下同步备份工具rsync的安装及配置

    http://www.cnblogs.com/wander1129/archive/2013/03/27/2984922.html

  4. VMware中为CentOS配置静态ip并可访问网络-windows下的VMware

    首先确保虚拟网卡(VMware Network Adapter VMnet8)是开启的,然后在windows的命令行里输入“ipconfig /all”,找到VMware Network Adapte ...

  5. 线程结束，GetExitCodeThread后结束值一直STILL_ACTIVE,259的问题

    最近在用VC++编写一个视觉检测系统,其中开的线程比较多.知道线程什么时候结束是很重要的一个问题.其中用到了GetExitCodeThread()函数.函数原型如下: BOOL GetExitCode ...

  6. Android OKHttp 可能你从来没用过的拦截器 【实用推荐】

    前言 在平时开发中,你有没有下面这样的困扰呢? 场景一 明明是服务端的接口数据错误,而QA(测试)第一个找到的可能是客户端开发的你,为什么这个页面出现错误了? 而作为客户端开发的你,可能要拿出测试机连 ...

  7. javaweb期末项目-stage1-part2-UML设计

    UML设计.rar-下载 说明:解压密码为袁老师全名拼音(小写) 相关链接: 项目结构:https://www.cnblogs.com/formyfish/p/10828672.html 需求分析:h ...

  8. Dlib支持CPU指令集编译问题（SSE4.2或者AVX）

    The compile script is: mkdir build cd build cmake ../../tools/python -DUSE_SSE2_INSTRUCTIONS=ON cmak ...

  9. 李宏毅 线性回归预测PM2.5

    作业说明 给定训练集train.csv,要求根据前9个小时的空气监测情况预测第10个小时的PM2.5含量. 训练集介绍: (1):CSV文件,包含台湾丰原地区240天的气象观测资料(取每个月前20天的 ...

  10. 关于Dev-c++运行时与Windows不兼容问题

    问题描述. 解决方案 1.鼠标右键点击图标,进入属性. 2.点击上方的兼容性. 3.在兼容模式中勾选以兼容模式运行这个程序并选择windows7. 4.再点击以管理员身份运行此程序. 5.点击应用. ...