左边label随着右边textarea高度自适应

左边label随着右边自适应

近期项目中，有表单需求
默认展示两列，当内容多的时候，可以展示一列
左边列
<div>
<label>备注</label>
<span>计算机</span>
</div>
右边列
<div>
<label>备注</label>
<span>计算机</span>
</div>
当右边有textarea的时候，让textarea高度随着内容自适应
同时左边的标题label有灰色背景,也随着右边一起自适应高度
刚开始思考 费解
最后 通过 正负数值撑开
.box div label{
display: inline-block;
padding-bottom:1000px; /* new */
margin-bottom:-1000px; /* new */
background: #dedede;
}
padding-bottom:正最大 , margin-bottom:负最大
即可抵消 自适应高度
详情可见附件：http://files.cnblogs.com/files/leshao/%E5%B7%A6%E8%BE%B9label%E9%9A%8F%E7%9D%80%E5%8F%B3%E8%BE%B9%E8%87%AA%E9%80%82%E5%BA%94.rar

感谢 一棵树!哈

时间： 2024-10-05 04:24:28

左边label随着右边textarea高度自适应的相关文章

获取textarea文本框所选字符光标位置索引，以及选中的文本值；textarea高度自适应，随着内容增加高度增加；获取输入框中的光标位置

获取textarea文本框所选字符光标位置索引,以及选中的文本值 $.fn.selection = function () { var s, e, range, stored_range; if (this[0].selectionStart == undefined) { var selection = document.selection; if (this[0].tagName.toLowerCase() != "textarea") { var val = this.val()

textarea高度自适应问题

textarea中的文字如果过多,就会产生滚动条,一本分文本被遮盖住,不能看到所有的文本. 那么,如何才能让textarea的高度随输入内容多少,可以自动的改变高度呢? 解决思想: 1 利用contenteditable属性,让div变得可以编辑. 优点:方便,简介 缺点:提交数据不方便 2 利用js,动态改变textarea的高度 优点:提交数据很方便 缺点:要写好几段代码 我不禁提出质疑:在设计textarea这个标签的时候,专家们为何不给他一个可以高度自适应的属性呢? 谁能回答我?

textarea 高度自适应（chrome+ie8测试有效）

最近有一个需求,需要让textarea宽度不变,但是高度随着用户的输入高度自适应.由于浏览器版本的不兼容,很多方法通常只能在一个浏览器中起作用. 下面我写了一个小的demo,可以在chrome 和 ie8下正常使用,其他浏览器没有测试过. 第一种方式使用 js+css方式实现 <textarea rows='6' cols='100' style='overflow:scroll;overflow-y:visible;height:96px;width:679px;overflow-x:hidd

textarea高度自适应

有时候写表单的时候,会有一个 备注框textarea.因为textarea不支持自适应高度,就是定好高度或者是行数之后,超出部分就会显示滚动条,看起来不美观.我们需要美观实现的效果:默认显示一行.当输入的文字超过一行或者输入Enter时,输入框的高度会随着改变,直到输入完毕.也就是要实现textarea的高度自适应 ========================================================= 方案A:用div来模拟textarea实现的,用CSS控制样式,不

textarea高度自适应（可设置最大高度）

<!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" con

Jquery插件----TextArea高度自适应

textArea的高度自适应本来应该很简单的,只需要用js监听它的输入然后修改其高度即可,甚至对于ie只要用css(overflow:visible;)控制就可以了.但是同样会有兼容性问题,用一个jQuery插件来实现.代码如下: $.fn.extend({ textareaAutoHeight: function (options) { this._options = { minHeight: 0, maxHeight: 1000 } this.init = function () { for

实现textarea高度自适应内容，无滚动条

最近接触到一个很好用的js插件,可以实现textarea高度随内容增多而改变,并且不显示滚动条,推荐给大家: http://www.jacklmoore.com/autosize/

textarea 高度自适应

一.$('textarea').keyup(function () { $(this).height(this.scrollHeight); });效果一般 二.https://github.com/alexdunphy/flexText <div class="flex-text-wrap"> <pre> <span></span> <br> <br> </pre> <textarea id=&

js控制textarea高度自适应

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .chackTextarea-area{line-height: 20px; font-size: 14px;padding: 0;border: 1px solid #CDCDCD; width