首先说一下textarea的高度随文字的内容自适应，用div模拟textarea。直接看代码。其中

contenteditable="true"表示div可以编辑。。主要是设置
overflow: auto;
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style type="text/css">

    .textarea{

      width: 300px;

      border:1px solid #ccc;

      min-height:30px;

      overflow: auto;

      outline:0;

     }

 </style>

</head>

<body>

  <div class="textarea" contenteditable="true">textarea</div>

</body>

</html>

再说下外层的div随内层的div高度自适应。直接看代码。起到作用的是在外层div的样式上加display:table

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style type="text/css">

  .box{

      width: 800px;height: 400px;

      border: 1px solid #000;

      position: relative;

      display: table;

    }

    .textarea{

      width: 300px;

      border:1px solid #ccc;

      min-height:30px;

      overflow: auto;

      outline:0;

     }

 </style>

</head>

<body>

<div class="box">

  <div class="textarea" contenteditable="true">textarea</div>

</div>

</body>

</html>

外层div随内层div高度自适应的更多相关文章

  1. DIV+CSS左右列高度自适应问题

    其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...

  2. div仿textarea使高度自适应

    今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...

  3. div模拟textarea且高度自适应

    需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...

  4. div嵌套内层div的margin-top转移给外层div的解决办法

    在web开发过程中,有些情况下给内层div设置的margin却被莫名奇妙的转移给了外层div.百度之后,发现它竟然是css2.1中盒模型中规定的内容: In this specification, t ...

  5. div上中下布局中间自适应

    需求1: 头尾固定高度,中间自适应 1.上部(header)Div高度固定100px,宽度100%: 2.下部(footer)Div高度固定100px,宽度100%: 3.中部(middle)DIV高 ...

  6. 外层div高度不随内层div高度改变的解决办法

    当b1和b2都是float=left时候,a1层的高度不会被b1和b2的高度撑开. <div id=“div1″> <div id=”div2″ style="float: ...

  7. bootstrap中实现外层DIV自适应，内层DIV宽度固定且居中的布局

    <!DOCTYPE html><html> <head> <link rel="stylesheet" href="css/bo ...

  8. 让内层Div将外层Div撑开

    在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...

  9. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

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

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

随机推荐

  1. JavaScript 整理的基础的方法

    innerHTML //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. innertext//innerText 属性返回文本值 没有结构信息 $("#test& ...

  2. ERP开发流程

    一.使用Xshell连线执行r.r adzi140 或 助记码r.t 都可以打开数据表设计器 表格建完后,DBA前三个需要点一下,如果表格显示需要表格重建,点最后一个,表格新建完成后,记得点击执行异动 ...

  3. Tomcat启动时出现乱码的解决方式

    在网上下载了一个版本号为apache-tomcat-8.5.38的Tomcat,因为这个Tomcat一直没有用过,所以今天启动时出现了如下乱码: 解决方案: 找到Tomcat目录下conf文件夹中的l ...

  4. [Spring+SpringMVC+Mybatis]框架学习笔记（九）：Mybatis主配置文件和映射文件

    第9章 Mybatis主配置文件和映射文件 9.1 用Mybatis进行开发的两种方式 在正式的开发环境中用Mybatis进行开发有两种方式: 1)原始的接口和实现类的方式 缺点: 重复代码太多,sq ...

  5. Linux shell：根据盘符定位硬盘在服务器上的位置

    disk-light.sh #!/bin/bash t_dev=$1 [ -b "$t_dev" ] || { echo "-b failed: $t_dev" ...

  6. React: husky > pre-push hook failed (add --no-verify to bypass)

    解决方案 提交commit和推送代码时都加上--no-verify参数,然他跳过检查 提交 推送

  7. 常用c++ STL 汇总

    常用STL: vector 变长数组,倍增的思想 初始化: //初始化 vector<int> a; vector<int> a(n); vector<int> a ...

  8. 镜像救援更改root密码

    第一种:镜像救援 1,确定有镜像,要有镜像才行. 2,重启客户端 3, 在开机读白条logo界面, 键入Esc一次(只能按一次第二次就退出了)(需要考验手速),选择CD或者U盘 4,进入救援模式 5, ...

  9. 实现无限存储：基于JuiceFS 创建 Samba 和 NFS 共享

    随着企业数据量的持续增长,存储容量需求日益增大.如何采用没有容量上限的云存储替换本容量有限的本地磁盘,已成为广泛的需求和共识.特别是在企业中常用的 Samba 和 NFS 共享,如果能够使用云存储作为 ...

  10. 【Nacos篇】Nacos基本操作及配置

    官方文档:https://nacos.io/zh-cn/docs/v2/ecology/use-nacos-with-spring-cloud.html 前置条件:SpringCloud脚手架 单机模 ...