实现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. Django博客系统

    零.创建项目及配置 一.编写 Model 层的代码 二.配置 admin 页面 三.根据需求定制 admin

  2. 一百二十二：CMS系统之页面抽离和登录页面

    将登录和注册需要的共性标签抽离出来做父模板 将css改名为base base模板 {% from 'common/_macros.html' import static %}<!DOCTYPE ...

  3. Webupload+PHP上传大文件

    1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...

  4. Kafka 和 ZooKeeper 的分布式消息队列分析

    1. Kafka 总体架构 基于 Kafka-ZooKeeper 的分布式消息队列系统总体架构如下: 如上图所示,一个典型的 Kafka 体系架构包括若干 Producer(消息生产者),若干 bro ...

  5. playbook部署flanneld

    定义playbook的主机组 说明: 1.playbook的主机组和ansible的主机组不一样, 2.playbook的主机组文件必须要和playbook文件在同一个目录下否则会报如下错误: [ro ...

  6. 小程序接入云通信IM

    小程序接入云通信IM--插件 小程序微信后台搜索AI情报官组件即可获得小程序云通信IM的即时通信能力

  7. C# 保留两位“有效数字”，而不是两位“小数”

    1.问题描述: 最近在处理软件结果显示时,发现如果利用 Math.Round(Number,N) 取N为小数时,有的结果不能显示完全 比如:15.3245 和 0.00106 两个数字,如果 N=2 ...

  8. 【AMAD】django-activity-stream

    动机 简介 个人评分 动机 为你的django站点生成活动流(类似facebook feed).用户可以在个人feed页面看到订阅的人的活动流. 简介 django-activity-stream1中 ...

  9. DEVOPS ROADMAP

  10. 【miscellaneous】海康威视监控摄像头实现web端无插件监控实拍效果

    [rtsp]海康威视监控摄像头实现web端无插件监控实拍效果 详细介绍参见:http://live.cuplayer.com/RtspCameraLive.html web端无须装插件(支持PC,安卓 ...