CSS Flexbox全高列

我想用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占据所有其他的剩余空间比200px是left占用的预期。但是，他们不是全高？

这不是重复的，因为它使用Flexbox的

来源

2017-10-16 tommyd456

当然是一个重复的，这意味着_this问题已经有一个answer_，甚至Flexbox，就需要为它的最外层_flex container_的高度，因为你使用％的高度，该百分比值是基于它的父母，在这种情况下是“身体”。 – LGSon

您不需要为此使用flexbox，甚至使用flexbox与解决方案无关。 – TylerH

使用视口高度尝试。这将使divs成为视口的整个高度。

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

来源

2017-10-16 10:29:48 Conor

CSS Flexbox全高列

回答

相关问题