Expanding a vertical div to the full height [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have an html page broken into 4 parts: Header, menu, content and footer.
Header is at the top, footer at the bottom. In between are the menu on the left and the content on the right.
The height of the page may be set by the menu or the content, depending on which is bigger (both can change).
I want to put a background on the menu block that extends to the footer, even if the actual menu items are much shorted. So, basically, I want the menu block to be filled in, based on the size of either it or the content, depending on which is bigger. Any ideas?

Answer 1

Demo: http://jsfiddle.net/176dgmhy/
This can not be achieved using anything but display table or javascript.
Display table-cell makes divs act like table cells but without cluttering the css with table elements like tr,td, and so on.
* {
border: 1px solid;
}
header {
padding: 20px;
text-align: center;
}
.cont {
width: 500px;
}
.wrap {
display: table;
width: 100%;
}
.wrap > * {
display: table-cell;
}
.menu {
width: 30%;
}
.wrap .stuff {
height: 200px;
}

Answer 2

You could set up the menu and content areas with display: table-cell:
//add the table div as well as the cell class to menu and content
<div class="header">header</div>
<div class="table">
<div class="cell menu">menu</div>
<div class="cell content">content</div>
</div>
</div>
<div class="footer">footer</div>
.header, .footer { width: 100%; height: 50px; }
.table { display: table; width: 100%; }
.cell { display: table-cell; }
.menu { width: 50px; }
.content { }
JSFiddle Demo

Answer 3

Method 1 :
Use flexbox
This is an example of how to achieve your goal using a flebox.
Method 2 :
One way to do so would be setting -
html, body {
height: 100%;
}
and then
div {
height: 100%;
}
This will allow the div to take full height of the screen.
But the drawback of this is that if the content is too big, then it might get cut on smaller screens
Here is a pen as an example