外层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自适应外 ...
随机推荐
- Bellman-Ford算法及SPFA算法的思路及进一步优化
Bellman-Ford算法 算法 以边为研究对象的最短路算法. 应用场景 有负边权的最短路问题. 负环的判定. 算法原理 \(n\) 个点的最短路径最多经过 \(n - 1\) 条边. 每条边要么经 ...
- ChatGPT变笨了，好在还有自知之明
大家好,我是老章 好久没有写文章了,顺便向大家汇报一下最近在忙的事情(多数无疾而终): 1 开发了一个IMG2Latex工具(截图一个公式,自动把latex代码塞进剪贴板) 2 开发了一个播客转文字稿 ...
- 一条命令突破Windows限制，暂定更新时间至3000天
在系统界面上最长也就只能延期 35 天,而且 35 天以后一定要更新了才能继续暂停.不过,我找到了一段能延长暂停时间的代码 reg add "HKEY_LOCAL_MACHINE\SOFTW ...
- WPF自定义标题栏
往往原有的标题栏无法满足需求,此时就需要进行自定义标题栏. 重新定义Window的Template 首先,需修改WindowChrome的几个属性 CaptionHeight属性值就是自定义标题栏的高 ...
- Codeforces Round 882 (Div. 2)
Codeforces Round 882 (Div. 2) A.The Man who became a God 题目大意 给定一个数组 \({x_1,x_2,⋯,x_n}\) 和一个整数 \(k\) ...
- vlan与单臂路由
vlan 1,什么是vlan vlan叫做虚拟局域网 (VLAN, Virtual LAN) 虚拟局域网(VLAN)是一组逻辑上的设备和用户,这些设备和用户并不受物理位置的限制,可以根据功能.部门及应 ...
- Java中锁的简单使用体验
锁是控制多个线程访问共享资源的一种同步机制. synchronized:可以将代码块或方法设置为同步. ReentrantLock:提供了比synchronized更广泛的锁操作函数. ReadWri ...
- 谈一谈电商API接口
随着电商行业的快速发展,越来越多的企业开始意识到并利用API接口来提升其电商平台的功能和效率.但是,对于普通用户来说,对API接口可能还不太了解.那么,什么是API接口,特别是电商API接口呢?本文将 ...
- torch-1 tensor & optim
开个新坑, pytorch源码阅读-从python代码开始读起. torch/ 1.tensor.py 继承自torch._C._TensorBase , 包括各种操作,TODO:随后看cpp代码 _ ...
- 面霸的自我修养：ThreadLocal专题
王有志,一个分享硬核Java技术的互金摸鱼侠 加入Java人的提桶跑路群:共同富裕的Java人 今天是<面霸的自我修养>第5篇文章,我们一起来看看面试中会问到哪些关于ThreadLocal ...