css - How do I get div to occupy entire height of parent div? -

I am using a bootstrap based layout and under that div is a div called "content" Basically a big table, divs as shown below is the problem until I specify some height clearly to be the div to show the scheduler_here (to show below) it looks very small . I have been given below that what is under the div content css setup I have attempted to specify height to 100% and that does not work. I'm not a CSS expert and I'm just learning. Any idea how I would like to modify the parent "content" div so that the scheduler is captured, the height of the window, or it showed up with the scrollbar? "content" class = "span10" & gt; & Lt; Div id = "scheduler_here" category = "dhx_cal_container span10" style = "height: 2000px; width: 95%" & gt; & Lt; Div class = "dhx_cal_navline" class = "span10" & gt; & Lt; Div class = "dhx_cal_prev_button" & gt; & Amp; Nbsp; & Lt; / Div & gt; & Lt; Div class = "dhx_cal_next_button" & gt; & Amp; Nbsp; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; # Content {box-shadow: -3px -1px 2px RGBA (0, 0, 0, 0.95); Background: url ("/ static / img / bg.jpg") Repeat scrolls 0% 0% transparent; Filter: None; Padding: 25px 0px 25px 40px; Margin: -25px-4px; Status: Relative; Z-index: 1; Minimum height: 100%; }

To calculate the height (or minimum height) for a non -Joho value when using% value, the parent container needs a clear height value or a count value.

In your case, tag you height to html and body at 100%, so I recommend you: < Pre> html, body {height: 100%; }

In this way, your # container will achieve the height of the viewport and will define the computed height value well.

Footnote

You need to make sure that the height is set to all block level ancestor elements between the body and # container device Either you get the height, set it to a clear value (for example 400px) or a relative value (example: 100%).