外层div随内层div高度自适应
首先说一下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高度自适应的更多相关文章
- DIV+CSS左右列高度自适应问题
其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...
- div仿textarea使高度自适应
今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...
- div模拟textarea且高度自适应
需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...
- div嵌套内层div的margin-top转移给外层div的解决办法
在web开发过程中,有些情况下给内层div设置的margin却被莫名奇妙的转移给了外层div.百度之后,发现它竟然是css2.1中盒模型中规定的内容: In this specification, t ...
- div上中下布局中间自适应
需求1: 头尾固定高度,中间自适应 1.上部(header)Div高度固定100px,宽度100%: 2.下部(footer)Div高度固定100px,宽度100%: 3.中部(middle)DIV高 ...
- 外层div高度不随内层div高度改变的解决办法
当b1和b2都是float=left时候,a1层的高度不会被b1和b2的高度撑开. <div id=“div1″> <div id=”div2″ style="float: ...
- bootstrap中实现外层DIV自适应，内层DIV宽度固定且居中的布局
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="css/bo ...
- 让内层Div将外层Div撑开
在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...
- DIV+CSS左右两列自适应高度的方法
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...
- div中iframe高度自适应问题
网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...
随机推荐
- PostgreSQL 性能优化: 执行计划
查询计划 扫描结点 顺序扫描 索引扫描 只用索引的扫描 位图堆扫描 位图索引扫描 公共表表达式的扫描 自定义扫描 外表扫描 函数结果扫描 子查询扫描 表样本扫描 行地址扫描 行集合扫描 工作表扫描 连 ...
- 【SpringBoot】注解
Controller - @RestController - @RequestMapping("/path") Controller内方法 @GetMapping("/p ...
- 音视频开发进阶——YUV与RGB的采样与存储格式
在上一篇文章中,我们带大家了解了视频.图像.像素和色彩之间的关系,还初步认识了两种常用的色彩空间,分别是大家比较熟悉的 RGB,以及更受视频领域青睐的 YUV.今天,我们将继续深入学习 RGB.YUV ...
- gin 接口开发 - 用户输入自动 TrimSpace
最近在思考一个问题,针对用户的输入,能不能快速校验? 比方说下面的 struct,大家用过 gin 的就知道,支持指定某个字段为 required,用户如果不输入,就检验不通过. type Login ...
- Linux 如何删除乱码的文件
事情是这样,服务器很多人在使用,以前的离职同事留了一大堆不知道是什么东西. 那些文件看不了,又删不掉,非常碍眼. 我搜索了挺多资料,没有一篇文章能真的解决问题(感觉都是抄来抄去的). 用 SFTP 工 ...
- 数据库是要拿来用的，不是用来PK先进性的
周五参加了WAIC后又和一家上海本地的数据库厂商交流了一下午.等我要买高铁票回南京的时候已经买不到票了.好不容易刷到一张到苏州北的高铁票,我就上了车.上车后突然想起还不如就回苏州老家住一晚算了.到家后 ...
- 痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU启动那些事（10.A）- FlexSPI NAND启动时间(RT1170)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RT1170 FlexSPI NAND启动时间. 本篇是 i.MXRT1170 启动时间评测第四弹,前三篇分别给大家评测 ...
- Oracle 11gR2 单实例 For linux6
第一章 准备工作 1.1 系统硬件和软件环境检查 Ø 物理内存至少1G # grep MemTotal /proc/meminfo Ø swap物理内存小于2G时设置为物理内存 ...
- [golang]使用logrus自定义日志模块
简介 logrus是一个第三方日志库,性能虽不如zap和zerolog,但方便易用灵活.logrus完全兼容标准的log库,还支持文本.JSON两种日志输出格式. 特点 相较于标准库,logrus有更 ...
- 知识图谱（Knowledge Graph）- Neo4j 5.10.0 使用 - Python 操作
数据基于: 知识图谱(Knowledge Graph)- Neo4j 5.10.0 使用 - CQL - 太极拳传承谱系表 这是一个非常简单的web应用程序,它使用我们的Movie图形数据集来提供列表 ...