外层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自适应外 ...
随机推荐
- Stable Diffusion AIGC：3步成为P图大师
摘要:instructPix2Pix文字编辑图片是一种纯文本编辑图像的方法,用户提供一张图片和文本编辑指令,告诉模型要做什么,模型根据编辑指令编辑输入的图像,最终输出用户想要的图像. 本文分享自华为云 ...
- 我用numpy实现了VIT，手写vision transformer, 可在树莓派上运行，在hugging face上训练模型保存参数成numpy格式，纯numpy实现
先复制一点知乎上的内容 按照上面的流程图,一个ViT block可以分为以下几个步骤 (1) patch embedding:例如输入图片大小为224x224,将图片分为固定大小的patch,patc ...
- BUUCTF-MISC-LSB(stegsolve的一种妙用)
题目已知是LSB隐写 丢入stegsolve,点 > ,可以看见Red plane 0,Green plane 0,Blue plane 0上边好像有东西 点analyse->data e ...
- ChatGPT的探索与实践-业务应用篇
本篇文章主要介绍在实际的开发过程当中,如何使用GPT帮助开发,优化流程,恰逢今年京东20周年庆,文末会介绍如何与618大促实际的业务相结合,来提升应用价值.全是干货,且本文所有代码和脚本都是利用GPT ...
- 2023年icpc大学生程序设计竞赛-wmh
这次比赛名额比较少,程老师还是给了我们新生更多机会,非常感谢.第一次去这么远打比赛,也算是比较开心的,过去那天晚上就被队友拉着出去玩,玩的很嗨,打的很菜.vp去年题的时候是自信的,参加今年正式赛的时候 ...
- C#获取文件MD5
什么是MD5? MD5 Message-Digest Algorithm,MD5信息摘要算法.一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值(hash value),用于 ...
- hadoop 启动增加DEBUG信息
export HADOOP_ROOT_LOGGER=DEBUG,console
- upload-libs通关攻略
pass01 第一关是一个前端验证,只要把Javascript禁止再上传就可以绕过了. 上传成功,到上传的地址查看结果如下: pass-02 这是一个MIME绕过,用bp抓包后修改文件类型即可将下面这 ...
- 如何配置Linux的yum源
一.配置本地yum源 1.挂载光盘 a.建目录 #mkdir /media/cdrom b.挂载光盘 #mount /media/sr0 /media/cdrom c.挂载本地iso文件 #mount ...
- 基于C#的应用程序单例唯一运行的完美解决方案 - 开源研究系列文章
今次介绍一个应用程序单例唯一运行方案的代码. 我们知道,有些应用程序在操作系统中需要单例唯一运行,因为程序多开的话会对程序运行效果有影响,最基本的例子就是打印机,只能运行一个实例.这里将笔者单例运行的 ...