All geek questions in one place

What effect do different position values ​​have on children in the body when their height is 100%?

Essentially, someone can explain this:

Because the body is not located (or, more precisely, its position: static by default), setting the child to height: 100% causes it to be 100% of the height of the html element, not the body of the element. Thus, if you want something to be as tall as the body (down at the bottom of the bottom of the page) usebody { position:relative }

This statement is taken from: http://phrogz.net/css/htmlvsbody.html It is located at the bottom of the page.

+4
source share
3 answers

, 2004. html. , , position:static.

, :

<!doctype html>

<style>
    html { height:100%; }
    body{}
    div {height:100%; background:#ccc;}
</style>

<body>
    <div></div>
</body>

, div , . 100%, div html.

+1

. body . position: relative;, .

body, , body, body. body 100%, html 100%.

: JS Fiddle

html, body {
    height: 100%;
}
div {
    height: 100%;
    background: blue;
    width: 100%;
}

, , .

:

: 100% 100% html, body

, height body, 100% html: JS Fiddle

+1

, , , , , , . . , HTML , 100%, , .

: HTML:

<html>
  <body>
    <div>Hello World<div>
  </body>
</html>

CSS

html {height:100%;}
body {height:100%;}
div {height:100%;}

div, , , "Hello World" .

0

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

More articles:


All Articles