实现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. 实验吧中围在栅栏中的爱-------writeup

    涉及知识点:栅栏密码解密.摩斯密码解密.替代密码解密 题目 可以看到下面一行东西,明显是一串摩斯密码,利用CTFCrakTools将密文解密 得到另一串密码kiqlwtfcqgnsoo 那么我们尝试着 ...

  2. ScreenShot 截图工具类

    import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Rect; import an ...

  3. python之NLP数据清洗

    1.知识点 """ 安装模块:bs4 nltk gensim nltk:处理英文 1.安装 2.nltk.download() 下载相应的模块 英文数据处理: 1.去掉h ...

  4. Java内部类(3)：局部内部类

    有这样一种内部类,它是嵌套在方法和作用域内的,对于这个类的使用主要是应用与解决比较复杂的问题,想创建一个类来辅助我们的解决方案,到那时又不希望这个类是公共可用的,所以就产生了局部内部类,局部内部类和成 ...

  5. Mybatis Guide

    每个基于MyBatis的应用都是以一个SqlSessionFactory的实例为中心的.SqlSessionFactory的实例可以通过SqlSessionFactoryBuilder获得.而SqlS ...

  6. Linux - curl和Wget

    curl - transfer a URL curl SYNOPSIS curl [options] [URL...] DESCRIPTION curl is a tool to transfer d ...

  7. Postman配置环境变量添加token

    postman测试接口时,每次都需要获取token以后,复制到接口里,特别复杂. 这里通过把获取token接口的返回数据添加到环境变量,然后将环境变量名设置在其他接口的token中,获取一次token ...

  8. Linux安装sdkman

    项目使用java的开发者一定会为新配环境变量而头大,sdkman很好的解决了系统sdk管理的痛点,仅需简单的几行命令就可以完成sdk的安装,更改默认版本.再也不用担心环境变量的问题. 安装 既然是命令 ...

  9. 逆序对 -- cogs1438 火柴排队

    题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=vimiQkqjU [题目描述] 样例一输入: 4 2 3 1 4 3 2 1 4 样例二 ...

  10. springboot整合es客户端操作elasticsearch（三）

    继续上个随笔: 那么我们只需要修改controller中文件就可以完成相关操作 本次主要是对文档得操作: 更新文档: package com.cxy.elasticsearch.controller; ...