對於做後台管理系統或者一屏頁面來說，會涉及到做左右兩欄的效果，左邊作為導航欄，右邊作為主頁面。通常情況下，我們首先想到的是使用浮動效果將兩欄浮動起來左右放置，但是這樣會導致，其中一些內容的位置會出現錯位。因此這裡，給出了乙個兩欄寬度自適應的方式，用來解決浮動問題。
給定左邊導航欄的寬度為200px，高度為500px。右邊的主體內容部分寬高自適應為整個頁面剩餘的部分。
給導航欄新增浮動效果，這時發現右邊的部分浮動到左邊的下面，為了調整這一布局，給右邊的部分新增overflow:hidden即可。
*注意：
這裡會有人問：我不可以直接新增右浮動嗎？這樣也可以實現左右放置的效果啊！
答：如果新增右浮動那麼必須給右邊部分設定寬高，這樣浮動才會有效果，如果讓其進行寬高自適應後，再給其新增浮動，浮動是識別不了寬高的，也就無法顯示右邊的部分了。
html,body
.left
.right
CSS 實現兩欄布局，左側固定寬度，右側自適應
1 flex 實現 doctype html 實現兩欄布局 title html,body content left right content div style head content left 這是第乙個div div right 這是第二個div div div body html 2 f...
css實現兩欄自適應布局
前端經典的兩欄布局 1 左側定寬，左浮動 右側寬度100 doctype html 兩欄布局 左側定寬左浮動，右側寬度100 left right 2 使用彈性布局，父元素display flex，左側定寬，右側flex 1，佔滿容器寬度 body left right 3 父元素相對定位，左側定寬...
css布局 兩欄 自適應高度
只使用css實現 有兩種方式,一種是通過相對定位,再絕對定位獲取父親元素的高度,一種是通過margin bottom 999em padding bottom 999em 父親元素超出隱藏 1 doctype html 2 html lang en 3 head 4 meta charset utf...