2017-10-16 66 views
0

我想用Flexbox創建一個佔據整個寬度和高度的簡單的兩列網頁。左欄爲固定寬度200px,右欄佔據剩餘空間。CSS Flexbox全高列

到目前爲止,我有:

:root { 
    overflow-x: hidden; 
    height: 100%; 
} 

body { 
    min-height: 100% 
} 

.flexbox { 
    height: 100%; 
    display: flex; 
} 

.left { 
    flex: 0 0 200px; 
    height: 100% 
} 

.right { 
    flex: 1 
} 

和:

<div class="flexbox"> 
    <div class="left"> 
    Left 
    </div> 
    <div class="right"> 
    Right 
    </div> 
</div> 

寬度正在與right佔據所有其他的剩餘空間比200pxleft佔用的預期。但是,他們不是全高?

這不是重複的,因爲它使用Flexbox的

+0

當然是一個重複的,這意味着_this問題已經有一個answer_,甚至Flexbox,就需要爲它的最外層_flex container_的高度,因爲你使用%的高度,該百分比值是基於它的父母,在這種情況下是「身體」。 – LGSon

+0

您不需要爲此使用flexbox,甚至使用flexbox與解決方案無關。 – TylerH

回答

0

使用視口高度嘗試。這將使divs成爲視口的整個高度。

.flexbox { 
    height: 100vh; 
    display: flex; 
}