為什么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/