All geek questions in one place

DIV within div 100% of height, old riddle

Can someone explain to me why the yellow div does not stretch to the bottom?

I tried various permutations of height, min-height, etc., but to no avail.

Should I just use tables instead ?:-)

Here is the output of the page: http://pastehtml.com/view/cd1ibk3vx.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> html, body { margin: 0px; padding: 0px; height: 100%; } #mainContainer { width: 100%; padding: 0px; background-color: #EEEEEE; min-height: 100%; } #mainContent { width: 800px; margin: 0px auto 0px auto; padding: 100px 50px 50px 50px; background-color: #FFFFCC; min-height: 100%; } </style> </head> <body> <div id='mainContainer'> <div id='mainContent'>Why doesn't this stretch to bottom?</div> </div> </body> </html>
+4
source share
2 answers

To min-height add just height: 100%; in #mainContainer .

  #mainContainer { width: 100%; padding: 0px; background-color: #EEEEEE; height: 100%; min-height: 100%; }

In addition, you will need to remove the indentation (and width) of the #mainContent . min-height calculated without regard to padding and fields, so if you leave them, #mainContent will always be higher than the browser window.

http://jsfiddle.net/mQuh5/1/

+5
source

Now the work is CHANGE

In fact, you set the height of the parent class set to 100% remove min-

  #mainContainer { width: 100%; padding: 0px; background-color: #EEEEEE; height: 100%; }
+1
source

Source: https://habr.com/ru/post/1436621/

More articles:


All Articles