根據題目給出你的答案。
（下高度固定，上自適應）
題目：下高度固定為150px，上自適應。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
頁面布局-兩欄布局4title
>
>
html *
body
style
>
head
>
>
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}.top2
.bottom2
我是上欄
我是下欄
-->
display: table;
width: 100%;
height: 100vh;
}display: table-row;
}.top3
.bottom3
我是下欄
-->
>
>
.top4
.bottom4
style
>
class
=>
class
="top4"
>
我是上欄div
>
class
="bottom4"
>
我是下欄div
>
article
>
section
>
body
>
html
>
絕對定位 / flexbox / **布局 / 網格布局 ；
各方案優缺點？
1）絕對定位
優：簡單
缺：脫離文件流，需結合bfc應用，**較多
2）flexbox
優：簡單快捷，相容性好
3）**布局
優：相容性較好
缺：每一列高度會同時變化；**需先渲染，延遲頁面生成速度
4）網格布局
優：可實現多行多列的二維複雜操作，相容性較好，簡化**
相容性好的方案有？
flexbox、網格布局
注意！！！上下布局撐開整個頁面，一般最外層高度設為height = 100vh才行。***尚存在很多不足，望提出不同的意見，互相交流。*
頁面兩欄布局
一邊整理一邊記憶 學習 4種情況 一欄定寬 一欄自適應 一欄不定寬 一欄自適應 兩欄等高 左右寬度比 1 2，右邊 分上下結構，高度比 1 1 左側定寬，右側自適應 方法一 設定 兩個高度相同 左邊 float left，設定寬度a 右邊不設定寬度，但 margin left a 塊級元素 流式特性...
頁面常用的三欄布局與兩欄布局
cantainer left right cantainer left right 將父元素設定為position relative.左邊元素 position absolute left 0 top 0 右邊元素 positon absolute right 0 top 0 中間元素 margin...
頁面布局（三欄布局）
假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應。1.浮動布局 2.絕對定位 3.flexbox解決 4.table cell 布局 5.grid網格布局。doctype html en utf 8 viewport content width device width,i...