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

好的，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％？

最佳答案

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

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

#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>

希望这可以帮助！ :)

关于html - 为什么display:flex不让侧边栏占据可用DIV高度的100％？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48552217/