I am trying to create a layout with specific height requirements. Here is the code snippet:
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 am facing an issue where I want the sidebar to occupy all available height without specifying parent height in pixels. Setting the sidebar position to absolute can solve this, but it introduces bugs. Is there a way for the relatively positioned child to take up the full height of the parent without having to specify the parent's height?
In the provided fiddle example, when the #main content exceeds the sidebar's width, the sidebar appears shorter than intended. The goal is for the sidebar to fill the entire height regardless of the main content size.