0

I'm trying to figure out a relatively browser-compatible way of allowing the height of a parent div to expand with its children of width: 100% and some percentage height. I need the parent to have height: 100% because the first child's height is dependent on it. I want a background image on the parent div that's aligned to the bottom of the entire page which overflows the screen, but the parent div's height is limited to the height of the screen because its height is set to 100%.

In my case, I've set the following properties: 

html, body { width: 100%; height: 100%; }

.parent {
    width: 100%;
    height: 100%:
    position: relative;
}

.child1 {
    width: 100%;
    height: 100%;
    min-height: 520px;
    max-height: 960px;
    position: relative;
}

.child2 {
    width: 100%;
    height: 900px;
    position: relative;
}

I can position a div inside of the second child to be absolutely positioned relative to the bottom of the second child, but I need to have overflow: hidden set on the second child for other elements, and since the background size is supposed to scale with the width of the page, it gets clipped on large screens.

Example: http://jsfiddle.net/qxbu0mom/

edit:

Thanks to Terry for pointing out I can use vh; I can just change the first child's height to 100vh and remove height: 100% from the parent.

Dennis
  • 233
  • 2
  • 12
  • "parent to have height: 100%" but you didn't tell us that 100% is relative to *what*? Also, including an image would be very helpful in explaining what you want to achieve precisely. – Terry Sep 16 '14 at 22:26
  • @Terry added a JSFiddle! All elements up to the parent have `height: 100%` set, so relative to the screen – Dennis Sep 16 '14 at 22:28
  • You can use viewport units, i.e.g `100vh` for the height. – Terry Sep 16 '14 at 22:30
  • @Terry ok, but what about for < IE9? – Dennis Sep 16 '14 at 22:34
  • You'll have to use alternative methods then, such as JS: http://stackoverflow.com/questions/13948713/is-there-any-cross-browser-javascript-for-making-vh-and-vw-units-work – Terry Sep 16 '14 at 22:37
  • you can do this with jQuery ... – mostafaznv Sep 16 '14 at 22:40
  • I'm aware; I was looking for a solution that didn't require JavaSciprt – Dennis Sep 24 '14 at 01:52

0 Answers0