CSS textarea高度自适应问题解决方案
创始人
2024-07-11 10:11:40
0

你对CSS textarea高度自适应的概念是否熟悉,这里和大家描述一下,希望对你的学习有所帮助。

CSS textarea高度自适应

用CSS控制textarea文本域的高度随内容的变化而变化,不出现滚动条。

CSS代码:

代码如下:

  1. .t_area{  
  2. width:300px;  
  3. overflow-y:visible  
  4. }  
  5.  
  6. 随便在这里输入内容,textarea的高度会随着你输入的内容而变化,  
  7. 不会出现滚动条,实现很简单,就是一段CSS:overflow-y:visible  
  8.  

首先,原则上实现textarea自适应必须适用CSS,不能直接适用“width=100%”这样的写法,具体示例:

代码如下:

  1.  
  2.  
  3. xxxxx  
  4.  
  5.  

 统一在FF、IE下的显示效果:

如果用textarea的属性字数宽度(cols)和行数(rows)来控制textarea的大小你会发现在,在IE和FF下的每行字数和文字的行数都不相同,而且在字数不足滚动的情况下,IE是默认有滚动条的,而FF是没有滚动条的。
那如何控制textarea在IE中和FF中相同的效果呢,其实比较简单:

1、用textarea的宽度(widht)和高度(height)来定义textarea的大小;

2、让滚动条自适应:overflow-y:auto。

IE6中textarea宽度问题

textarea设了100%宽度,在IE7,FIREFOX都正常显示.但在IE6里只要输入文字就会自动增宽.

解决方法:在textarea外再加一个100%宽的div.

overflow的允许属性:auto、visible、hidden

示例:

  1. overflow-x:visible;  
  2. overflow-y:visible;  

【编辑推荐】

  1. 探究CSS caption-side属性使用
  2. IE6.0对padding的解读分析
  3. CSS样式表高效使用八大秘诀
  4. CSS Sprites简介以及优缺点
  5. IE6中常见CSS兼容性解决十大技巧

 

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...