All geek questions in one place

100% height not working

So, I have a div that should have 100 percent height. This is only the parent <body> element, so 100% should be the height of the window. But instead of covering the height of the screen, it reaches only a container element inside it. The funny thing is, if I use fixed positioning, it does what I want. Alas, I cannot use corrections in the site layout. Here is my css. If you want to see what the site looks like right now, here is the link: http://ion.comli.com/projects/

 body, ul { margin: 0; padding: 0; } body { background: url('/images/background.png') no-repeat fixed; } /* CONTENT */ .content{ margin-left: auto; margin-right: auto;  position: absolute;  top: 50px;  left: 15%; height: 100%; width: 70%; background-color: #ffffff; } /* END CONTAINER*/ /* CONTAINER */ .container{ background: #ffffff; margin: 5% 10%; text-align: center; } .container .title a { font-family: Franchise, "sans-serif"; font-size: 48px; color: black; line-height: 48px; text-align: center; text-decoration: none; } .container .date { font-family: Ubuntu, "sans-serif"; font-size: 12px; color: #666666; line-height: 12px; text-align: center; text-decoration: none; } .container .body { font-family: Ubuntu, "sans-serif"; font-size: 16px; text-align: left; } /* END CONTAINER */ /* PROJECT */ .project { display: block; margin: 5% auto; height: 100px; width: 500px; border-radius: 10px; background: url("/images/background.png"); opacity: 0.5; } .project h2 { font-family: Franchise; font-size: 48px; color: white; text-align: center; } /* END PROJECT */ /* NAVIGATION */ nav ul { background-color: #1b1b1b; display: table; list-style: none; position: fixed; top: 0; height: 50px; width: 100%; box-shadow: 0 0 6px #888888; z-index: 1; } nav ul li { float: left; } nav ul li a { display: table-cell; height: 50px; line-height: 50px; padding: 0 65px; font-family: Ubuntu; font-size: 16px; color: #ffffff; text-decoration: none; background-color: #292929; } nav #title { font-family: Lobster; font-size: 36px; line-height: 50px; border-right: 1px solid #ffffff; background-color: #1b1b1b; } nav #menu { padding: 0 25px; background-color: #1b1b1b; } nav #menu:hover { box-shadow: none; background-color: #292929; } nav li:hover #menu { box-shadow: none; background-color: #292929; } nav ul ul { background: #292929; display: none; position: absolute; top: 100%; right: 0px; width: 15%; } nav ul ul li { background: #292929; float: left; position: relative; clear: both; } nav ul li:hover > ul { box-shadow: none; display: block; } /* END NAVIGATION */ /* SCROLLBAR */ /* END SCROLLBAR */

Anyway, can I get this div to cover all 100%? I am pretty sure that there is a simple answer to this question, but I cannot find it. Thanks in advance!

+4
source share
2 answers

You must make sure that all .content parents have height .

So, in your case, the following is missing:

 html, body { height: 100%; }

Alternative

Or you could position .content as fixed and you would have the same effect, but with a different approach

 .content { position: fixed; top: 0; left: 0; height: 100%; }
+10
source

Make the body 100% high

 html, body { height: 100%; }
+3
source

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

More articles:


All Articles