整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、應用場景
左側一個導航欄寬度固定，右側內容根據用戶瀏覽器窗口寬度進行自適應
二、思路
首先把這個問題分步解決，需要攻克以下兩點：
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小時內與您取得聯系。
