let div fill complete height of parent div - html

Question

I think I tried every solution posted here on stackoverflow except the correct solution for sure.
2 hours nothing then give a div an 100% height, very frustating.
Maybe I'm just tired (Night in Germany) and someone see the correct solution in seconds.
Everything looks great, except the div with the class "layout_content_middle" which have an repeatable background image.
The "id=content" div has the correct 100% height, but the conainer div inside the content div doesn't and this is the problem.
Here my current code.
Important note, this is an bootstrap project, so I work with container and grid classes.
html,
body {
height: 100%;
}
#content {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent header and footer by its height */
margin: -80px auto -165px;
/* Pad bottom by header and footer height */
padding: 80px 0 165px;
}
/* Set the fixed height of the header here */
#header {
height: 80px;
}
/* Set the fixed height of the footer here */
#footer {
height: 165px;
}
<div id="header">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="layout_content_top"></div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container" style="max-width: 983px; background-color: red; height: 100%">
<div class="row">
<div class="col-xs-12">
<div class="layout_content_middle">
asdasd asd ad as das d as
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12" style="padding-left: 16px">
<div class="layout_footer"></div>
</div>
</div>
</div>
</div>

Answer 1

You have the !important rule set for height: auto, which overrides your height: 100%, making your height automatic which causes your to expand only as much as necessary to fit the content.
So the following rule needs to be removed:
#content {
height: auto !important;
}
See it in action here:
html,
body {
height: 100%;
}
#content {
min-height: 100%;
height: 100%;
/* Negative indent header and footer by its height */
margin: -80px auto -165px;
/* Pad bottom by header and footer height */
padding: 80px 0 165px;
}
/* Set the fixed height of the header here */
#header {
height: 80px;
}
/* Set the fixed height of the footer here */
#footer {
height: 165px;
}
<div id="header">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="layout_content_top"></div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container" style="max-width: 983px; background-color: red; height: 100%">
<div class="row">
<div class="col-xs-12">
<div class="layout_content_middle">
asdasd asd ad as das d as
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12" style="padding-left: 16px">
<div class="layout_footer"></div>
</div>
</div>
</div>
</div>

Answer 2

You can use position: relative on the parent, then add position: absolute; top: 0; bottom: 0; and left and right if you want to fill the width.