There are 3 div elements in my code that I want to style like this:
Below is the HTML code snippet:
<section class="main-window">
<div id="topdiv"></div>
<div id="middiv"></div>
<div id="botdiv"></div>
</section>
And here's the CSS code:
.main-window
{
vertical-align: middle;
border: 2px solid gray;
border-radius: 5px;
width: 90%;
height: 70%;
background-color: White;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#topdiv {
background-color: beige;
height: 40%;
border: 2px solid black;
}
#middiv {
background-color: lightblue;
height: 40%;
border: 2px solid black;
}
#botdiv {
background-color: lightgreen;
height: 20%;
border: 2px solid black;
}
You can view the code on this fiddle link.
While setting the heights of the top two divs to 40% fills the parent div, adding borders to each div slightly exceeds the parent boundaries.
My query is: Is it possible to set the height of the first two divs to 40% and have the third div stretch until the bottom of its parent?