mintychai February 2016

How do I make a child div match the height of scrolling parent?

How can I make a div and nested divs extend down to the full height of the screen with scrolling on the body?

Link to a fiddle: https://jsfiddle.net/qsczjd01/

CSS:

#megaAll{
  box-sizing: border-box;
  position: absolute;
  background-color: gray;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

I need #megaAll (gray), #megaMain(pink), and #contentContainer to extend all the way down the page, but it seems unable to extend to the full height because of the scrolling on the body. I need the scrolling on the body and fixed sidebar on the right to remain.

Answers


Shakeeb Ahmad February 2016

Extending them down is just height:auto; which need not to be mentioned as it is default. Whatever will be the height of your body, it will auto adjust it all over the page. "sidebar on the right to remain" means fixed, this will work if I got you right.

position: fixed;


J. Bush February 2016

Use

position: fixed;

instead. This will position the element fixed in the window, rather than fixed within the body element.


mintychai February 2016

Figured it out! I changed my divs from using position: absolute, and then 0px all around, to using static positioning with margins at 0px.

New example div:

#megaAll{
  box-sizing: border-box;
  background-color: gray;
  margin: 0 auto;
}

More info here: http://stackoverflow.com/a/11068062/5879337

Post Status

Asked in February 2016
Viewed 2,907 times
Voted 7
Answered 3 times

Search




Leave an answer