textarea 自适应父容器大小

	          <div id="collapse-panel-4" class="am-panel-bd am-collapse am-in">
	          	<textarea cols="80" rows="50" id="msg" class="comments"></textarea>
	          </div>

/* textarea 自适应父容器大小 */
.comments {
	width: 100%; /*自动适应父布局宽度*/
	overflow: auto;
	word-break: break-all;
	/*在ie中解决断行问题(防止自动变为在一行显示,主要解决ie兼容问题,ie8中当设宽度为100%时,文本域类容超过一行时,当我们双击文本内容就会自动变为一行显示,所以只能用ie的专有断行属性“word-break或word-wrap”控制其断行)*/
}

效果:

改变浏览器大小后:

时间: 2024-11-03 21:11:35

textarea 自适应父容器大小的相关文章

easy ui 自动生成accordion不能自适应父容器问题

用easy-ui的accordion,用json自动生成时,不能自适应父容器.代码如下: (document).ready(function(){ $.ajax({ type: 'POST', dataType: "json", url:'getmenu.action', success: function(data){ $.each(data,function(i,item){ $('#menu').accordion('add',{ title: item.menu_name, c

【CSS】div父容器根据子容器大小自适应

Div即父容器不根据内容自动调节高度,我们看下面的代码: 1 <div id="main"> 2 3 <div id="content"></div> 4 5 </div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下还是不能完好的自动伸展.内容的高度比较高了,但容器main的高度还是不能撑开. 我们可以通过三种方法来解决这个问题. 一,增加一个清除浮动,让父容器知道高度.请注意,

实现未知高度父容器及其左右排列子容器的高度自适应的办法

1 <div class="container"> 2 <div class="content-1">未知高度和宽度的内容</div> 3 <div class="content-2">未知高度和宽度内容</div> 4 </div> 需要实现两个子容器中一个依据另外一个的高度而自动等高,同时父容器也是同样自动等高,宽度可以自适应或者按需分配. 目前我学习到的两种解决办法一种

父容器不根据内容自适应高度的解决方法

Div不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"></div> </div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下还是不能完好的自动伸展.内容的高度比较高了,但容器main的高度还是不能撑开. 我们可以通过三种方法来解决这个问题. 一,增加一个清除浮动,让父容器知道高度.请注意,清除浮动的容器中有一个空格.

【前端】浮动后父容器高度自适应

float:left; overflow:hidden; 当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的添加而添加,所以造成内容元素的显示超出了容器. 在我们没有为容器设置高度的时候,容器的高度是自适应的.然而,当容器中的元素都浮动以后,脱离了文档流.容器的高度因为自适应的原因就为0了. 为了方便大家观察,我为父容器设置了边框.内间距.原本上面四张图片是在上面的容器中的.将图片设置左浮动以后,容器的高度就为0了. Q1:这会为我们带来什么影响? A1:浏览器在解析下一个容器的时候,默

父容器内子容器浮动的高度自适应问题 _ CSS_HTML

‍1.当‍父容器不设置固定高度.宽度时,且子元素设置了浮动.让父容器随子容器的撑开而撑开,缩小而缩小,自动适应高宽度. 这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS HACK.zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!--[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!--[i

H5弹性盒布局的使用(父容器属性)

为父容器添加display:flex/inline-flex 父容器可以使用的属性有: 1.flex-direction:决定主轴的方向 有四个属性值: row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-reverse:主轴为垂直方向,起点在下沿. 2.flex-wrap:如果一条轴线排不下,如何换行. 有3个属性值: nowrap(默认):不换行.当父容器宽度不够时每个item会被适当

移动端框架篇-控制父容器的滑屏框架-slip.js

设计滑屏框架的办法一般有2种 控制父容器法 控制子容器法 这个算是控制父容器法 通过控制父容器的transform: translateY或margin-top或top的值来上下滑动页面,每次的位移的取值为当前页面高度~ 这里采用slip框架,库大小5.75K,非常轻量,可以放心用在你的项目~ slip框架的页面样式需要自定义,不过这里我简单写好了~ (如果你不使用框架,推荐用transform: translate(X,Y)的写法,首先transform: translate可设计高性能动画,

IsMdicontainer新窗体被父容器包括的设置、Timer控件

IsMdicontainer的设置 这是对于整个窗体的设置,将一个窗体的IsMdicontainer设置为true之后,再打开新窗体便可以让新窗体被父容器包括在内. 操作方法: 1)先建立一个子窗体Child.cs 2)在父容器的按钮里写代码,打开子窗体 Child c = new Child(); //判断窗体是否已经打开,以控制其只能打开一个 int count = 0; foreach (Form f in this.MdiChildren) { if (f.Name == c.Name)