为什么display：flex不让侧边栏占据可用DIV高度的100％？

Question

好的，CSS专家。 这对您来说很简单。 我想在主内容区域的左侧有一个侧边栏。 我希望侧边栏占据30％的屏幕，内容占据70％的屏幕。 但是，我希望侧边栏区域占据可用高度的100％。 我有

<div id="main">
  <div id="side">
    <%= render "layouts/sidebar" %>
  </div>
  <div id="contentArea"><%= yield %></div>
</div>

我以为将父DIV设置为“ display：flex;”。 将使一切正确...

#main {
        display: flex;
        width: 100%;
        background-color: green;
}

#side {
        background-color: #e0e0e0;
        width: 30%;
        display: inline-block;
        float: left;
        height: 100%;
}

#contentArea {
        text-align: center;
        width: 70%;
        display: inline-block;
}

但是现在，我的侧边栏的高度仅等于其中的内容。 我如何使其成为所有事物的100％？

Answer 1

在您的结构中，“主”是父div，这意味着如果您将“所有内容的100％”设置为子div“侧”，而该div的位置不是绝对或固定，则“主”也将获得100％。 因此，您可以使用相对长度，例如高度：100vh。

jsfiddle

但是您可以将side div的位置设置为固定：当您在contentArea中滚动时会有所帮助，但是side div始终在左侧，高度为100vh。

jsfiddle

提示：如果使用flex，则可以不使用float进行操作（例如justify-content）。 检查它： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

问题是您在#side上指定了100%的height 。 具有讽刺意味的是，这实际上阻止了色谱柱占据整个垂直空间，因为它限制在容器的高度。 由于#main没有指定的高度，因此在#side上设置height: 100%会将其限制为其中内容（文本）的高度。

简单地删除它会使列扩展以占据整个垂直空间：

 #main { display: flex; width: 100%; background-color: green; } #side { background-color: #e0e0e0; width: 30%; display: inline-block; float: left; /*height: 100%;*/ } #contentArea { text-align: center; width: 70%; display: inline-block; } 

 <div id="main"> <div id="side"> Side </div> <div id="contentArea"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut interdum quam. Integer nec tincidunt erat, in scelerisque turpis. Pellentesque interdum turpis eu ante gravida, a auctor lacus pulvinar. Maecenas elementum massa ac felis gravida lobortis vitae eget nisi. Donec erat turpis, condimentum et ipsum in, tincidunt fringilla quam. Nam est dui, porttitor eget nisl sit amet, mollis varius dui. Suspendisse dui mauris, tincidunt vitae blandit ac, consectetur sed ex. Sed bibendum felis ex, id euismod odio euismod ac. Praesent viverra arcu quis arcu condimentum, eget varius elit suscipit. Donec tempus, justo vel iaculis vehicula, risus magna varius ex, vitae mattis elit turpis ac magna. Fusce porta tempus erat vel ultricies. Suspendisse vel erat blandit, semper dui sed, consequat urna. Pellentesque ultrices pellentesque feugiat. Donec sit amet turpis in orci accumsan blandit. In tincidunt erat sed tristique sagittis. Duis ultrices lacus quis vestibulum venenatis. Maecenas et risus quam. Quisque semper purus id mauris gravida dictum. Cras tellus augue, sollicitudin ac maximus eget, porta elementum elit. Fusce vulputate consectetur dapibus. Praesent semper augue lacus, vel laoreet tellus ultricies fermentum. Phasellus vestibulum fringilla purus ut malesuada. </div> </div> 

希望这可以帮助！ :)

Answer 3

使用： #side{height: 100vh;} （vh =视口高度），并删除显示弯曲，以便每个div具有不相等的高度。 链接到jsfiddle https://jsfiddle.net/gcoh62o6/5/