一、應用場景

左側一個導航欄寬度固定，右側內容根據用戶瀏覽器窗口寬度進行自適應

二、思路

首先把這個問題分步解決，需要攻克以下兩點：

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中再追加一個固定列，在右側浮動：

然后運行的效果是...左中布局，右邊空白，瀏覽器出現滾動條，右固定列換行后右浮動了。

然后我們做一個小小的改動——把剛才添加的右浮動固定列的dom放到自適應列前面，也就是說html的dom順序是左浮動，右浮動，自適應的順序！html如下：

效果就“神奇”的實現了~

這里一個注意點就是：浮動元素在dom中要在非浮動元素的前面，否則非浮動元素后面的浮動元素會換行。

具體原理待研究..網上好像沒查到，有誰知道的話希望告知~

總結：一定要自己實現試試，注意只有固定列脫離了文檔流，自適應列還在文檔流中！其他沒什么要說的了，但是應該還有更好的方法，等我看到了一并總結過來~

想要學習更多的編程技術，不如選擇重慶IT培訓，千鋒重慶100%面授式課程，拒絕視頻同步授課，拒絕雙元視頻班教學，拒絕直播授課，教師一對一指導學員做項目，全新打造“主流技術+前沿技術+企業級聯動”教學課程，重新優化和定義編程語言，采用最新版本技術開展教學，致力于為學員打造最牛的、最新的技術，助力學員拿下BAT級企業Offer。

千鋒重慶IT技術開發培訓，讓你在同樣的起跑線，跑出不一樣的高度。

總結

以上是生活随笔為你收集整理的点击改变div高度_css实现div两列布局（两种方法）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。