user2896120 user2896120 - 1 month ago 12
CSS Question

Giving a vertical bar height 100%

I have a container class. Inside that class are all my elements. Including the vertical bar (link-panel) and the div next to it (control_panel). I am trying to give my vertical bar height: 100%. I know I have to give the container class a height of 100% for it to work, but every time I try to do that the (control_panel) div runs on top of the footer (an element that is not in the container). I have made a jsfiddle of what I am experiencing, but please note that the footer in the real file is dynamically added to the HTML, so that is why I did not include it in my container class.)

I've also tried giving the body height 100%, but the body does not reflect any changes to the vertical bar because the vertical bar's parent is container. How do I make it so that I can achieve a vertical bar with 100% height that runs down to the footer? Here's my jsFiddle

HTML

<html>
<body>
<div class="container">

<div class='control_panel'>
<div class='control_title'>
<h2>Your Settings</h2>
</div>

<div class='control_settings'>

</div>
</div>

<div class="link-panel">
<ul>


<li> Dashboard</li>
<hr>
<li> Blog</li>
<hr>
<li><span><b>|</b> Settings</span></li>
<hr>
<li> Contact Us</li>


</ul>
</div>
<!--End of link panel div-->
</div>

<div class='footer'>

</div>
</body>
</html>


CSS

.container {
display: block;
margin: 0px auto;
width: 100%;
}

.footer {
display: block;
width: 100%;
height: 500px;
background-color: black;
margin-top: 0px;
}

html,body {
position: relative;
height: 100%;
background-color: #f2f2f2;
}

.control_panel {
position: relative;
display: inline-block;
width: 60%;
margin-left: 0px;
}

.control_title {
display: block;
background-color: white;
height: 100px;
margin-bottom: 30px;
}

.control_settings {
display: block;
background-color: white;
height: 900px;
width: 900px;
}

.link-panel {
position: relative;
float: left;
width: 30%;
height: 100%;
background-color: #333333;
}

.link-panel ul {
list-style-type: none;
font-size: 19px;
margin-top: 35px;
}

.link-panel li {
margin-top: 15px;
}

Answer

You want child div to be of 100% height or their respective parent div, then you can use positions to achieve this.

See updated fiddle.

.container {
  display: block;
  margin: 0px auto;
  width: 100%;
  padding-left:30%;
  box-sizing:border-box;
  position:relative;
}
.link-panel {
    position: absolute;
    float: left;
    width: 30%;
    height: 100%;
    background-color: #333333;
    left: 0;
    top: 0;
}

https://jsfiddle.net/pd5bLv63/3/