外层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自适应外 ...
随机推荐
- 力扣744：寻找比目标字母大的最小字母； LeetCode744:Find Smallest Letter Greater Than Target
题目见文末 LeetCode link 思路及题解 手写二分 源码: class Solution: def nextGreatestLetter(self, letters: List[str], ...
- SQL Server中获取不同格式的日期
select * from 表名 where Convert(varchar(100),日期字段,23)='2008-12-15' Convert函数的应用: Select CONVERT(varch ...
- 【环境搭建】多版本的jdk共存
问题来源 burpsuite 2021需要使用Java 9及以上版本,而其他工具需要Java 8,因此需要两个版本共存,并且做到除了burpsuite以外的工具默认使用Java 8打开. 需要的软件 ...
- Mybatis（配置解析解读（核心））
核心配置文件 mybaits-confing.xml *properties(属性) *settring(设置) *typeAliases(类型别名) *typeHandlers(类型处理器) *ob ...
- 阿里如何实现秒级百万TPS？搜索离线大数据平台架构解读
★ 淘宝搜索阶段 在2008-2012这个阶段,我们重点支持淘宝搜索的业务发展,随着淘宝商品量的不断增加,逐步引入Hadoop.Hbase等开源大数据计算和存储框架,实现了搜索离线系统的分布式化,有力 ...
- 2023-07-25：你驾驶出租车行驶在一条有 n 个地点的路上 这 n 个地点从近到远编号为 1 到 n ，你想要从 1 开到 n 通过接乘客订单盈利。你只能沿着编号递增的方向前进，不能改变方向 乘
2023-07-25:你驾驶出租车行驶在一条有 n 个地点的路上 这 n 个地点从近到远编号为 1 到 n ,你想要从 1 开到 n 通过接乘客订单盈利.你只能沿着编号递增的方向前进,不能改变方向 乘 ...
- 【opencv】传统图像识别：hog+svm实现图像识别详解
图像识别技术是信息时代的一门重要的技术,其产生目的是为了让计算机代替人类去处理大量的物理信息.传统图像识别技术的过程分为信息的获取.预处理.特征抽取和选择.分类器设计和分类决策.本文也是从这四点出发进 ...
- shell编程之存储读写测试实战脚本
Shell编程是一种在命令行环境中编写程序的技术,常用于Linux和Unix系统.它主要使用Shell脚本语言来编写程序.Shell编程常用于系统管理.自动化任务.批处理等领域. 常用的Shell脚本 ...
- [ABC146E] Rem of Sum is Num
2023-02-27 题目 题目传送门 翻译 翻译 难度&重要性(1~10):4 题目来源 AtCoder 题目算法 数学 解题思路 先对整个序列求前缀和 \(sum_k=\sum_{i=1} ...
- 在 Spring 6 中使用虚拟线程
一.简介 在这个简短的教程中,我们将了解如何在 Spring Boot 应用程序中利用虚拟线程的强大功能. 虚拟线程是Java 19 的预览功能,这意味着它们将在未来 12 个月内包含在官方 JDK ...