記錄一下學習Bootstrap佈局自動拉伸
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Bootstrap自動拉伸改變大小</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type='text/javascript' src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<style>
.row {
margin-left:0;
margin-right:0;
}
.row .sp {
height:300px;
margin-bottom:10px;
border-bottom:3px #eee solid;
}
.editor {
height:300px;
border-right:3px #eee solid;
}
@media (max-width: 939px) {
.row .sp {
width:48.62% !important;
}
}
@media (max-width: 767px) {
.row .sp {
width:100% !important;
height:auto !important;
}
}
@media (max-width: 1200px) {
.row .sp {
width:49.62% !important;
}
}
@media (max-width: 767px) {
.row .sp {
width:100% !important;
height:auto !important;
}
}
.cont {
width:100%;
}
.inner {
overflow-y:auto;
overflow-x:hidden;
height:100%;
}
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
</style>
</head>
<body>
<div class="cont">
<div class="row">
<div class="col-sm-6 sp editor">
<div class="inner">豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛鬥之墟；人傑地靈，徐孺下陳蕃之榻。雄州霧列，俊採星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿範，襜帷暫駐。十旬休假，勝友如雲；千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區；童子何知，躬逢勝餞。
時維九月，序屬三秋。潦水盡而寒潭清，煙光凝而暮山紫。儼驂騑於上路，訪風景於崇阿；臨帝子之長洲，得天人之舊館。層巒聳翠，上出重霄；飛閣流丹，下臨無地。鶴汀鳧渚，窮島嶼之縈迴；桂殿蘭宮，即岡巒之體勢。
披繡闥，俯雕甍，山原曠其盈視，川澤紆其駭矚。閭閻撲地，鐘鳴鼎食之家；舸艦彌津，青雀黃龍之舳。雲銷雨霽，彩徹區明。落霞與孤鶩齊飛，秋水共長天一色。漁舟唱晚，響窮彭蠡之濱；雁陣驚寒，聲斷衡陽之浦。
遙襟甫暢，逸興遄飛。爽籟發而清風生，纖歌凝而白雲遏。睢園綠竹，氣凌彭澤之樽；鄴水朱華，光照臨川之筆。四美具，二難並。窮睇眄於中天，極娛遊於暇日。天高地迥，覺宇宙之無窮；興盡悲來，識盈虛之有數。望長安於日下，目吳會於雲間。地勢極而南溟深，天柱高而北辰遠。關山難越，誰悲失路之人？萍水相逢，盡是他鄉之客。懷帝閽而不見，奉宣室以何年？
嗟乎！時運不齊，命途多舛。馮唐易老，李廣難封。屈賈誼於長沙，非無聖主；竄梁鴻於海曲，豈乏明時？所賴君子見機，達人知命。老當益壯，寧移白首之心？窮且益堅，不墜青雲之志。酌貪泉而覺爽，處涸轍以猶歡。北海雖賒，扶搖可接；東隅已逝，桑榆非晚。孟嘗高潔，空餘報國之情；阮籍猖狂，豈效窮途之哭！
勃，三尺微命，一介書生。無路請纓，等終軍之弱冠；有懷投筆，慕宗愨之長風。舍簪笏於百齡，奉晨昏於萬里。非謝家之寶樹，接孟氏之芳鄰。他日趨庭，叨陪鯉對；今茲捧袂，喜託龍門。楊意不逢，撫凌雲而自惜；鍾期既遇，奏流水以何慚？
嗚乎！勝地不常，盛筵難再；蘭亭已矣，梓澤丘墟。臨別贈言，幸承恩於偉餞；登高作賦，是所望於羣公。敢竭鄙懷，恭疏短引；一言均賦，四韻俱成。請灑潘江，各傾陸海云爾：
滕王高閣臨江渚，佩玉鳴鸞罷歌舞。
畫棟朝飛南浦雲，珠簾暮卷西山雨。
閒雲潭影日悠悠，物換星移幾度秋。
閣中帝子今何在？檻外長江空自流。</div>
</div>
<div class="col-sm-6 sp">
<div class="inner">
朝搴阰之木蘭兮，夕攬洲之宿莽。
日月忽其不淹兮，春與秋其代序。
唯草木之零落兮，恐美人之遲暮。
不撫壯而棄穢兮，何不改乎此度？
乘騏驥以馳騁兮，來吾道夫先路！
昔三後之純粹兮，固衆芳之所在。
雜申椒與菌桂兮，豈惟紉夫蕙茞！
彼堯、舜之耿介兮，既遵道而得路。
何桀紂之昌披兮，夫惟捷徑以窘步。
惟夫黨人之偷樂兮，路幽昧以險隘。
豈餘身之殫殃兮，恐皇輿之敗績。
忽奔走以先後兮，及前王之踵武。
荃不查餘之中情兮，反信讒而齌怒。
餘固知謇謇之爲患兮，忍而不能捨也。
指九天以爲正兮，夫惟靈脩之故也。
曰黃昏以爲期兮，羌中道而改路。
初既與餘成言兮，後悔遁而有他。
餘既不難夫離別兮，傷靈脩之數化。
餘既滋蘭之九畹兮，又樹蕙之百畝。
畦留夷與揭車兮，雜杜衡與芳芷。
冀枝葉之峻茂兮，願俟時乎吾將刈。
雖萎絕其亦何傷兮，哀衆芳之蕪穢。
衆皆競進以貪婪兮，憑不厭乎求索。
羌內恕己以量人兮，各興心而嫉妒。
忽馳騖以追逐兮，非餘心之所急。
老冉冉其將至兮，恐脩名之不立。
朝飲木蘭之墜露兮，夕餐秋菊之落英。
苟餘情其信姱以練要兮，長顑頷亦何傷。
掔木根以結茝兮，貫薜荔之落蕊。
矯菌桂以紉蕙兮，索胡繩之纚纚。
謇吾法夫前修兮，非世俗之所服。
雖不周於今之人兮，願依彭咸之遺則。
長太息以掩涕兮，哀民生之多艱。
餘雖好修姱以鞿羈兮，謇朝誶而夕替。
既替餘以蕙纕兮，又申之以攬茝。
亦餘心之所善兮，雖九死其猶未悔。
怨靈脩之浩蕩兮，終不察夫民心。
衆女嫉餘之蛾眉兮，謠諑謂餘以善淫。
固時俗之工巧兮，偭規矩而改錯。
背繩墨以追曲兮，競周容以爲度。
忳鬱邑餘侘傺兮，吾獨窮困乎此時也。
寧溘死以流亡兮，餘不忍爲此態也。
鷙鳥之不羣兮，自前世而固然。
何方圜之能周兮，夫孰異道而相安？
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 ">
<div class="inner">
<h1>Bootstrap 佈局</h1>
忽吾行此流沙兮，遵赤水而容與。
麾蛟龍使梁津兮，詔西皇使涉予。
路修遠以多艱兮，騰衆車使徑待。
路不周以左轉兮，指西海以爲期。
屯余車其千乘兮，齊玉軑而並馳。
駕八龍之婉婉兮，載雲旗之委蛇。
抑志而弭節兮，神高馳之邈邈。
奏《九歌》而舞《韶》兮，聊假日以媮樂。
陟升皇之赫戲兮，忽臨睨夫舊鄉。
僕伕悲餘馬懷兮，蜷局顧而不行。
亂曰：已矣哉！
國無人莫我知兮，又何懷乎故都！
既莫足與爲美政兮，吾將從彭咸之所居！</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var maxY=0 ; //取高度最高panel作爲分割欄位置
$(window).bind("resize", function(event){
if (this == event.target) {
$('.sp').removeAttr('style');
}
});
$('.editor').resizable({
handles: 'e, s',
minWidth:100,
maxWidth:900,
resize:function(event,ui){
var x=ui.element.outerWidth();
var y=ui.element.outerHeight();
var ele=ui.element;
var factor = $(this).parent().width()-x;
var f2 = $(this).parent().width() * .02999;
$.each(ele.siblings(),function(idx,item){
ele.siblings().eq(idx).css('height',y+'px');
//ele.siblings().eq(idx).css('width',(factor-41)+'px');
ele.siblings().eq(idx).width((factor-f2)+'px');
});
}
});
$('.sp:not(.editor)').resizable({
handles: 's',
resize:function(event,ui){
var y=ui.element.outerHeight();
var ele=ui.element;
$.each(ele.siblings(),function(idx,item){
ele.siblings().eq(idx).css('height',y+'px');
});
}
});
</script>
</html>
這裏主要引用Jquery UI 的js和css 來實現自動拉伸效果
當然還有其它方法：
參考如下：https://codepen.io/anon/pen/bLeZpP
https://codepen.io/barbalex/pen/ogZWNV