How to make a relatively positioned child to get all parent's height

Question

I have this layout

 body, html { height: 90%; } #content{ width: 100%; height: 100%; } #sidebar { position: relative; width: 200px; float: left; height: 100%; background-color: green; } #sidebar-content { height: 120px; background-color: blue; } #sidebar-footer { position: absolute; bottom: 0; height: 50px; width: 100%; background-color: black; } #main { position: relative; overflow: hidden; background-color: red; } #main-content { height: 750px; } 

 <div id="content"> <div id="sidebar"> <div id="sidebar-content"> </div> <div id="sidebar-footer"> </div> </div> <div id="main"> <div id="main-content"> </div> </div> </div> 

I need the sidebar to occupy all height available if it's height lower than the #main's. Setting the sidebar position to absolute solves this, but adding even more bugs, is there a solution for the relatively positioned child to get all the parent's height without specifying height of the parent in pixels?

As you can see in the fiddle, if #main exceeding the sidebar's width the sidebar is shorter, but it need to fill all the height.

Answer 1

CSS Flexbox does indeed solve your problem, and is the perfect answer if you don't have to support older browsers.

Basically, just adding display: flex to the container will sort this out for you.

Browsers support flexbox in a variety of ways, make sure you check the compiled CSS of that Pen to get all the browser pre-fixes and such.

Link to CodePen

Answer 2

You may be able to use a combination of css properties to achieve what you are looking for. The main reason you were running into trouble with the position:absolute was due to your float:left .

Have a glance through this and you may find some of the positioning and width declarations useful in your implementation:

 body, html { height: 90%; } #content { width: 100%; height: 100%; position: relative; background: lightgray; } #sidebar { position: absolute; width: 200px; height: 100%; top: 0; left: 0; background-color: green; z-index: 8; } #sidebar-content { height: 120px; background-color: blue; } #sidebar-footer { position: absolute; bottom: 0; height: 50px; width: 100%; background-color: black; } #main { overflow: hidden; background-color: red; height: 100%; position: absolute; top: 0; left: 200px; width: calc(100% - 200px); height: 100%; z-index: 10; } #main-content {} 

 <div id="content"> <div id="sidebar"> <div id="sidebar-content"> </div> <div id="sidebar-footer"> </div> </div> <div id="main"> <div id="main-content">this is the main content </div> </div> </div> 

Answer 3

I guess jQuery solution will help you solve your problem :) Try this This will allow to have the #sidebar to have same height as the container . Hope this helps :) Happy coding.

jQuery:

$(document).ready(function(){
    var wrapH = $('#content').outerHeight();

    $('#sidebar').css("height", wrapH);
});

Edited:

JS Fiddle Link

$(document).ready(function(){
    var wrapH = $('#main').outerHeight();

    $('#sidebar').css("height", wrapH);
});

Just change the content to main. Hope this solves the issue. This will make the sidebar height be the same as the main height.