All geek questions in one place

CSS full height div with margin?

I searched everywhere and can't figure out if there is a way to do this. Basically, I want to simulate this layout without using CSS3 attributes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Bad way...</title> <style> html,body{ margin:0px; height:100%; } .tall{ background-color:yellow; min-height:100%; height:100%; padding-top:50px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .short{ background-color:blue; height:100%; } </style> </head> <body> <div class='tall'> <div class='short'> Foo bar baz </div> </div> </body> </html>

I don't care how much extra markup or CSS there is if it is cross-browser compatible. I would just agree with the faux faux speakers, but that won't work in this situation. An iframe should be set in the short div, which should be complete.

Here's a tall div to show how it should look. All I want is a div that is full height but with an edge of 50 pixels on top. All my attempts just increase the height to 100% + 50 pixels.

I know that I can do this using JavaScript, but I would really like to get a CSS solution if possible.

+4
source share
3 answers

You can use absolute positioning as described here: http://www.alistapart.com/articles/conflictingabsolutepositions/

You can specify all sides of a div, for example.

 position: absolute; top: 50px; right: 0; left: 0; bottom: 0;
+2
source

Instead of "padding-top: 50px;" in.tall {} use margin-top: 50px;

+1
source

delete:

 .tall{ min-height:100%; }

along with the css3 property. Should work fine. The new css will look like

 .tall{ background-color:yellow; height:100%; padding-top:50px; } .short{ background-color:blue; height:100%; }
+1
source

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

More articles:


All Articles