实现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. iOS 隐藏导航栏后，UITableView向下偏移状态栏高度

    if (@available(iOS 11.0, *)) { self.mainTableView.contentInsetAdjustmentBehavior = UIScrollViewConte ...

  2. Spring Boot_打造企业级微信点餐系统_汇总贴

    2019更新版 Spring Boot双版本(1.5/2.1) 打造企业级微信点餐系统 H:\BaiDu\微服务0830\2019微服务时代Spring Boot双版本(1.5-2.1)  打造企业级 ...

  3. [GPU] Machine Learning on C++

    一.MPI为何物? 初步了解:MPI集群环境搭建 二.重新认识Spark 链接:https://www.zhihu.com/question/48743915/answer/115738668 马铁大 ...

  4. LINUX 的网站压力测试工具 webbench

    网站压力测试工具-Webbench webbench简介:        Webbench是有名的网站压力测试工具,它是由 Lionbridge公司(http://www.lionbridge.com ...

  5. iOS创建带删除线和价钱符号的Label

    效果显示如下: 只需要子类化Label,重写DrawRect()方法即可: #import "MyLabel.h" @implementation MyLabel - (insta ...

  6. avast关闭DeepScreen

    在“设置”-“防病毒”-去掉“启用 DeepScreen”.

  7. vm overcommit参数

    overcommit参数需要根据不同服务来进行调整,使内存得到充分利用的同时保证系统的稳定性.比如redis服务器建议把vm.overcommit_memory设置为1. 1.vm.overcommi ...

  8. Tensorflow 保存模型 & 在java中调用

    本节涉及: 保存TensorFlow 的模型供其他语言使用 java中调用模型并进行预测计算 一.保存TensorFlow 的模型供其他语言使用 如果用户选择“y” ,则执行下面的步骤: 判断程序执行 ...

  9. ambari 快速安装部署

    OS:Linux CPU消耗大,要准备5G以上,不然集群启动不了(我自己给它配了8G,启动整个集群是没问题,要用的话估计不够) 一.准备工作: 1.关闭防火墙:sudo ufw disable/ 2. ...

  10. 纪录一次left join一对多关系而引起的BUG

    纪录一次left join一对多关系而引起的BUG MySQL(11)---纪录一次left join一对多关系而引起的bug BUG背景 我们有一个订单表 和 一个 物流表 它们通过 订单ID 进行 ...