外层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自适应外 ...
随机推荐
- 解决安装报错 mysqlclient-1.4.6-cp38-cp38-win32.whl is not a supported wheel on this platform.
解决方法, 重命名 先查看pip对应匹配的名称 在PyCharm中查看 打开下边栏的Terminal,输入 pip debug --verbose 修改为一致后 最后进行安装 进入该安装包目录下,c ...
- freeswitch的mod_cdr_csv模块
概述 freeswitch是一款简单好用的VOIP开源软交换平台. 在语音呼叫的过程中,话单是重要的计价和结算依据,话单的产生需要稳定可靠,可回溯. fs中基本的话单模块mod_cdr_csv,可以满 ...
- Day04_Java_作业
A:选择题 1.下列哪个答案与show不是方法重载(b ). class Demo { void show(int a,int b,float c){} } A.void show(int a,flo ...
- 国产化之x64平台安装银河麒麟操作系统
背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟v4,CPU使用飞腾处理器.飞腾处理器是ARMv8架构的,在之前的文章中介绍了使用QEMU模拟ARMv8架构安装银河麒麟操作系统的方式 ...
- FireflySoft.LeaderElection增加基于ZooKeeper的Leader选举
FireflySoft.LeaderElection的第一个版本实现了基于Consul的Leader选举,考虑到ZooKeeper的一个常见用途也是选主,所以此类库把ZooKeeper也集成了进来.并 ...
- Jenkins-Pipline实现原理
Jenkins-Pipline原理 本文仅探讨jenkins pipline 的原理,是流水线的一个demo版本实现,不能代表Jenkins pipline的具体实现,仅供参考. 1. Jenkins ...
- 笔记：KMP的复习
Record 一个重要的字符串算法,这是第三次复习. 通过总结我认为之所以某个算法总是忘记,是因为大脑始终没有认可这种算法的逻辑(也就是脑回路). 本篇主要讲解从KMP的应用场景,再到算法知识,以及例 ...
- 使用 python 快速搭建http服务
python -m SimpleHTTPServer 8888 使用上面的命令可以把当前目录发布到8888端口. 直接浏览器访问 但是这条命令是当前运行的,不是后台运行的,也就是说如果Ctrl + C ...
- Cobalt Strike使用教程二
0x00 前言 继前一章介绍了Cobalt Strike的基本用法,本章接着介绍如何攻击.提权.维权等. 0x01 与Metasploit联动 Cobalt Strike → Metasploit m ...
- 干了这么多年C#，后悔没早点用这种“分页”，简单/高效/易维护
[前言] 干了这么多年C#,后悔没早点用这种"分页",简单/高效/易维护,比其它的分页方式强多了,不信你自己看. [正文] 支持.Net Core(2.0及以上)与.Net Fra ...