整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、应用场景
左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应
二、思路
首先把这个问题分步解决，需要攻克以下两点：
1、让两个div并排到一行
2、让一个div宽度固定，另个div占据剩下宽度的空间
关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；
关于第二点，首先有一个宽度固定的div，另外自适应的div宽度是多少？首先这个宽度不能写“100%”，因为这里的100%是相对于第一个非静态祖先元素的，也就是说如果这样写，页面会出现整个页面宽度+左边固定列宽度的情形。那么对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属性把左侧固定列空间空出即可。
三、实现
1、html
2、css
注：
1、fixedColumn 里注释的方法即绝对定位的实现方式，取消注释后把float那句注释掉，可以实现相同的效果
2、使用float需要注意清除浮动造成父元素塌陷的问题（这里不用清除，因为自适应列和固定列一样高，在标准流中可以撑起父元素）
四、扩展
如果把上面的问题稍微改变一下，要求展示一个左中右布局，而且左右固定，中间自适应，这要如何实现呢？
估计很多人会这样想：
css中.flexibleColumn样式添加一个属性：margin-right: 40px;
html中再追加一个固定列，在右侧浮动：
<div class="fixedColumn" style="float: right;"></div>
然后运行的效果是...左中布局，右边空白，浏览器出现滚动条，右固定列换行后右浮动了。
然后我们做一个小小的改动——把刚才添加的右浮动固定列的dom放到自适应列前面，也就是说html的dom顺序是左浮动，右浮动，自适应的顺序！html如下：
效果就“神奇”的实现了~
这里一个注意点就是：浮动元素在dom中要在非浮动元素的前面，否则非浮动元素后面的浮动元素会换行。
具体原理待研究..网上好像没查到，有谁知道的话希望告知~
总结：一定要自己实现试试，注意只有固定列脱离了文档流，自适应列还在文档流中！其他没什么要说的了，但是应该还有更好的方法，等我看到了一并总结过来~
想要学习更多的编程技术，不如选择重庆IT培训，千锋重庆100%面授式课程，拒绝视频同步授课，拒绝双元视频班教学，拒绝直播授课，教师一对一指导学员做项目，全新打造“主流技术+前沿技术+企业级联动”教学课程，重新优化和定义编程语言，采用最新版本技术开展教学，致力于为学员打造最牛的、最新的技术，助力学员拿下BAT级企业Offer。
千锋重庆IT技术开发培训，让你在同样的起跑线，跑出不一样的高度。
最近项目遇到一个说小不小说大不大的问题，输入框要自动换行，并且高度还得自适应，我试了几种方式，
1.input 输入，input不能换行，上网查询了说将css设为word-break: break-all; word-wrap:break-word;也是无效的。
2.div 设置contenteditable="true"属性，这种方法可以实现输入内容自动换行，并且自适应高度，但是项目需要光标从边输入，我试过text-align：right是无效的。所以这种方式也不行。
3.textarea，文本输入框，想想这个应该可以了吧，文本输入框是可以内容自动换行，可是高度怎么都是固定的啊。我还是没解决。百度吧，终于找到解决办法啦。
最后遇到一个光标在placeholder提示文字上面，解决办法：#textarea::-webkit-input-placeholder{ padding-right: 4px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#textarea {
display: block;
margin:0 auto;
overflow: hidden;
width: 550px;
font-size: 14px;
height: 18px;
line-height: 24px;
padding:2px;
text-align: right;
}
textarea {
outline: 0 none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
</head>
<body>
<textarea id="textarea" placeholder="回复内容"></textarea>
<script>
var autoTextarea=function (elem, extra, maxHeight) {
extra=extra || 0;
var isFirefox=!!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera=!!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent=function (type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle=elem.currentStyle ? function (name) {
var val=elem.currentStyle[name];
if (name==='height' && val.search(/px/i) !==1) {
var rect=elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};
return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight=parseFloat(getStyle('height'));
elem.style.resize='none';
var change=function () {
var scrollTop, height,
padding=0,
style=elem.style;
if (elem._length===elem.value.length) return;
elem._length=elem.value.length;
if (!isFirefox && !isOpera) {
padding=parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height=minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height=maxHeight - padding;
style.overflowY='auto';
} else {
height=elem.scrollHeight - padding;
style.overflowY='hidden';
};
style.height=height + extra + 'px';
scrollTop +=parseInt(style.height) - elem.currHeight;
document.body.scrollTop=scrollTop;
document.documentElement.scrollTop=scrollTop;
elem.currHeight=parseInt(style.height);
};
};
addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
};
</script>
<script>
var text=document.getElementById("textarea");
autoTextarea(text);// 调用
</script>
</body>
</html>
*请认真填写需求信息，我们会在24小时内与您取得联系。
