How to set a div with li to parents height - html

Question

I have ben boxing with this issue for ages now.
I have a parent div "wrapper" containing a child div "sidebar-wrapper" consisting of an ul with li in it.
I want "sidebar-wrapper"s height to fit "wrappers" height. My issue is when i set its height to auto goes 0.
My HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
a lit of these li's
</a>
</li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
Whatever Content!!
</div>
</div>
</div>
</div>
My css:
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:400px;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}

Answer 1

See this fiddle
The CSS used is as follows
html,body{
height: 100%;
}
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
I've given height:100% for html,body,wrapper and body-content..
Setting height to auto just sets the height equal to the height of the contents of the div..here i think you want the height to be equal to the wrapper..so you'll have to set it to 100%.
and this is how can i see your website after making the specified changes..

Answer 2

Change the sidewrapper height to 100% and give the wrapper a height: see fiddle: See fiddle
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: auto; /* example height */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}

Answer 3

Set the parent div's position to relative and children div's to absolute:
#wrapper {
...
...
/**** added css ****/
position:relative;
/*********************/
...
...
}
Edit 1
as you commented, I came to learn that you want the sidebar to available throughout the page regardless the height of the page.
If that is the case then "wrapper" div has nothing to do with.
Just set the position of "sidebar-div" to "fixed" and give proper top and bottom margins according to your page header and footer margins:
and set the top and bottom of child wrapper to 0:
#sidebar-wrapper {
...
...
/**** added css ****/
position:fixed;
top:10px;
bottom:10px;
/*********************/
...
...
}
Here's the updated demo JS fiddle link:
Updated Demo JS Fiddle Link
Hope that helps!