整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、應(yīng)用場景
左側(cè)一個導(dǎo)航欄寬度固定，右側(cè)內(nèi)容根據(jù)用戶瀏覽器窗口寬度進(jìn)行自適應(yīng)
二、思路
首先把這個問題分步解決，需要攻克以下兩點(diǎn)：
1、讓兩個div并排到一行
2、讓一個div寬度固定，另個div占據(jù)剩下寬度的空間
關(guān)于第一點(diǎn)，首先要明確，div屬于塊級元素，在文檔標(biāo)準(zhǔn)流中單獨(dú)占據(jù)一行。要想多個div在一行，就可以想辦法讓div脫離標(biāo)準(zhǔn)流，比如使用float或者absolute；
關(guān)于第二點(diǎn)，首先有一個寬度固定的div，另外自適應(yīng)的div寬度是多少？首先這個寬度不能寫“100%”，因?yàn)檫@里的100%是相對于第一個非靜態(tài)祖先元素的，也就是說如果這樣寫，頁面會出現(xiàn)整個頁面寬度+左邊固定列寬度的情形。那么對自適應(yīng)寬度的div處理方法是不去設(shè)置它的width屬性，瀏覽器會自動計算后讓它占一行，接下來給他設(shè)置margin-left屬性把左側(cè)固定列空間空出即可。
三、實(shí)現(xiàn)
1、html
2、css
注：
1、fixedColumn 里注釋的方法即絕對定位的實(shí)現(xiàn)方式，取消注釋后把float那句注釋掉，可以實(shí)現(xiàn)相同的效果
2、使用float需要注意清除浮動造成父元素塌陷的問題（這里不用清除，因?yàn)樽赃m應(yīng)列和固定列一樣高，在標(biāo)準(zhǔn)流中可以撐起父元素）
四、擴(kuò)展
如果把上面的問題稍微改變一下，要求展示一個左中右布局，而且左右固定，中間自適應(yīng)，這要如何實(shí)現(xiàn)呢？
估計很多人會這樣想：
css中.flexibleColumn樣式添加一個屬性：margin-right: 40px;
html中再追加一個固定列，在右側(cè)浮動：
<div class="fixedColumn" style="float: right;"></div>
然后運(yùn)行的效果是...左中布局，右邊空白，瀏覽器出現(xiàn)滾動條，右固定列換行后右浮動了。
然后我們做一個小小的改動——把剛才添加的右浮動固定列的dom放到自適應(yīng)列前面，也就是說html的dom順序是左浮動，右浮動，自適應(yīng)的順序！html如下：
效果就“神奇”的實(shí)現(xiàn)了~
這里一個注意點(diǎn)就是：浮動元素在dom中要在非浮動元素的前面，否則非浮動元素后面的浮動元素會換行。
具體原理待研究..網(wǎng)上好像沒查到，有誰知道的話希望告知~
總結(jié)：一定要自己實(shí)現(xiàn)試試，注意只有固定列脫離了文檔流，自適應(yīng)列還在文檔流中！其他沒什么要說的了，但是應(yīng)該還有更好的方法，等我看到了一并總結(jié)過來~
想要學(xué)習(xí)更多的編程技術(shù)，不如選擇重慶IT培訓(xùn)，千鋒重慶100%面授式課程，拒絕視頻同步授課，拒絕雙元視頻班教學(xué)，拒絕直播授課，教師一對一指導(dǎo)學(xué)員做項目，全新打造“主流技術(shù)+前沿技術(shù)+企業(yè)級聯(lián)動”教學(xué)課程，重新優(yōu)化和定義編程語言，采用最新版本技術(shù)開展教學(xué)，致力于為學(xué)員打造最牛的、最新的技術(shù)，助力學(xué)員拿下BAT級企業(yè)Offer。
千鋒重慶IT技術(shù)開發(fā)培訓(xùn)，讓你在同樣的起跑線，跑出不一樣的高度。
最近項目遇到一個說小不小說大不大的問題，輸入框要自動換行，并且高度還得自適應(yīng)，我試了幾種方式，
1.input 輸入，input不能換行，上網(wǎng)查詢了說將css設(shè)為word-break: break-all; word-wrap:break-word;也是無效的。
2.div 設(shè)置contenteditable="true"屬性，這種方法可以實(shí)現(xiàn)輸入內(nèi)容自動換行，并且自適應(yīng)高度，但是項目需要光標(biāo)從邊輸入，我試過text-align：right是無效的。所以這種方式也不行。
3.textarea，文本輸入框，想想這個應(yīng)該可以了吧，文本輸入框是可以內(nèi)容自動換行，可是高度怎么都是固定的啊。我還是沒解決。百度吧，終于找到解決辦法啦。
最后遇到一個光標(biāo)在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="回復(fù)內(nèi)容"></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);// 調(diào)用
</script>
</body>
</html>
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
