2

I have a page with stacked divs and the divs are added dynamically in a block fashion. It has to cover 100% of viewport height and show scrollbar when content goes beyond viewport. The issue I am facing is outer-div has to have a background-color. When given a min-height of 100% to this div and applying height:1px fix so that child div inherits 100% height, I get the desired effect as in child inside parent with min-height 100% not inheriting height However, the background color doesn't extend to full height. The nested divs and the mechanism to add divs dynamically is mimicked here: https://jsfiddle.net/b859L1gs/

$(document).ready(function() {
   $("#clickme").click(function() {
       $(".two").append(" < div class = 'region' > < /div>") 
   }); 
})
html {
    height: 100%;
}
body {
    height: 100%;
}
.one {
    min-height: 100%;
    height: 1px;
    background: green;
}
.two {
    height: 100%;
}
.region {
    height: 200px;
    border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <body>
        <div class="one">
            <div class="two">
                <div class="three">
                    ...
                    <div class="region">
                    </div>
                    <button id="clickme">
                        here
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>

Click the button to expand the divs and see the height expand but not the background-color. Note that the constraint as per application is to but background-color only at first outermost div and not to body.

Community
  • 1
  • 1
ams
  • 91
  • 7
  • Please include your HTML in the question as well. – TylerH Feb 02 '16 at 03:37
  • Done. Thank you ! The issue started with div.two required to have 100% height of viewport or same as parent with min-height:100%. – ams Feb 02 '16 at 03:41

2 Answers2

0

You need to give background: green; to .region. Then it will expand background color.

.region{
  height:200px;
  border:1px solid red;
   background: green;
}

Working Fiddle

ketan
  • 19,129
  • 42
  • 60
  • 98
  • Thank you ketan. But the background color is available in the application only at the div.one level. Hence the issue. Anything else like setting position:relative, absolute etc if fixes it, will work. – ams Feb 02 '16 at 04:09
  • @ams what is meaning? *"background color is available in the application only at the div.one level."* There is background color green in all newly added div. – ketan Feb 02 '16 at 04:17
  • .region is shared by some other page and hence cant add background-color to that. – ams Feb 02 '16 at 04:43
  • that is in place so that the div.two also have height 100% of viewport, since child of parent with min-height:100% cannot have height:100% – ams Feb 02 '16 at 05:02
0

Why do you set height: 1px and min-height: 100%?

Try this:

.one {
    background: green;
}
Manh Le
  • 1,630
  • 16
  • 26