css布局 兩欄 自適應高度

只使用css實現 有兩種方式,

一種是通過相對定位,再絕對定位獲取父親元素的高度,

一種是通過margin-bottom:-999em;padding-bottom: 999em; 父親元素超出隱藏

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>document
title
>
6head
>
7<
body
>89
<
style
>10*
11.wrap
15.wrap .left 
22.wrap .main 
25style
>
26實現一,通過 定位獲取父親元素的高度實現
27<
div 
class
="wrap"
>
28<
div 
class
="left"
>
29側欄
30div
>
31<
div 
class
="main"
>
32可以改變 高度 側欄自動識別高度
33div
>
34div
>
3536
<
style
>
37.wrap2
40.wrap2 .left 
47.wrap2 .main 
52style
>
53實現二,使用margin 和padding 配合使用
54<
div 
class
="wrap2"
>
55<
div 
class
="left"
>
56側欄
57div
>
58<
div 
class
="main"
>
59可以改變 高度 側欄自動識別高度
弊端:方案 2 針對是背景, 使用邊框會 無下邊框 需要注意,因為超出隱藏了,部分效果也有影響,
 
兩欄自適應布局與高度自適應
float bfc 使用 float 讓 left 塊脫離文件流，使用 bfc 規則，讓 right 塊寬度自適應，如下 類似聖杯布局給父元素設定 padding left right 元素寬度 100 left 元素通過 設定 left 和 margin left 屬性拉取到前面 flexflex...
css實現兩欄自適應布局
前端經典的兩欄布局 1 左側定寬，左浮動 右側寬度100 doctype html 兩欄布局 左側定寬左浮動，右側寬度100 left right 2 使用彈性布局，父元素display flex，左側定寬，右側flex 1，佔滿容器寬度 body left right 3 父元素相對定位，左側定寬...
兩欄自適應布局延展到多欄自適應布局
說到兩欄自適應布局，估計很多人看到這樣類似的文章，我經常也看過，但是那些實現方式跟我所經常使用的兩種方法不一樣，經常使用的意思是，我一遇到這種布局，立馬想到的就是使用這種。就像我們拿東西，我們立馬就會想到用手拿，當然還有很多方式可以拿到，比如用嘴刁。所以，當我們看到多種實現方式的時候，一定要學會比較...