Why isn't display:flex allowing my sidebar to take 100% of the available DIV height?

Question

Ok, CSS gurus. Here's an easy one for you. I want to have a sidebar to the left of my main content area. I'd like the sidebar to take up 30% of the screen and the content to take up 70%. However, I'd like the sidebar area to take up 100% of the available height. I have

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

I thought setting the parent DIV to have "display:flex;" would make everything right ...

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

but right now, the height of my sidebar is only equal to the content that's in it. How do I make it 100% of everything?

Answer 1

In your structure 'main' is parent div, that's mean if you set '100% of everything' to child div 'side' and this div not position absolute or fixed, 'main' get 100% too. So, you can use relative lengths, like height: 100vh.

jsfiddle

But you can set to side div position fixed: it will help when you get scroll in contentArea, but side div all time will in left side with height 100vh.

jsfiddle

Tip: if you use flex, you can manipulate without float (eg justify-content ). Check it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

The problem is that you specified a height of 100% on #side . Ironically, this actually prevents the column from taking up the full vertical space, as it caps to at the height of the container. Because #main doesn't have a specified height, setting height: 100% on #side will constrain it to the height of the content (text) within.

Simply removing this causes the column to expand to take up the full vertical space:

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

Hope this helps! :)

Answer 3

Use: #side{height: 100vh;} (vh = viewport height), and remove display flex so you can have unequal height for each div. Link to jsfiddle https://jsfiddle.net/gcoh62o6/5/