Giving a background color to the body overlaying the entire page. What for?

body {
  background-color: red;
}
<body>
  <div>Hello World!</div>
</body>
Run codeHide result

So, it background-color: red;applies to the whole page height, but when I check the page, the height of the body depends only on the divone containing Hello World! .

Someone please explain why this is so.

+4
source share
6 answers

The main reason is what HTMLtakes background-colorout BODYbecause:

The background of the root element becomes the background of the canvas and covers the entire canvas [...]

, background-color of HTML transparent, BODY. , HTML BODY, , BODY .

html {
  background-color: blue;
}

body {
  background-color: red;
}
<html>

<body>
  <div>Hello World!</div>
</body>

</html>
Hide result

, ( background-position) , . .

HTML , BODY, HTML. , HTML "HTML" XHTML "html", transparent background-color none background-image, HTML "BODY" "body" XHTML, . , .

W3 - 14 .

+4

.some{

    background-color: red;

}
<div class="some">Hello World!</div>
Hide result

, , -

+1

, , min-height div, max-height 100% (html).

:

min-height :

body {
   background-color: red;
   min-height: 200px;
}
<div>Hello World!</div>
Hide result

, 200px; .

+1

. <html> <body> -. <html> <html>, <body> .

HTML:

<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Metadata and such -->
  </head>

  <body>
    <!-- Where the content begins -->
  <body>

</html>

, , : . , , , .

, . , , , .

, - , , , . CSS : root. .

, , , <html>, . <html> <body> , , .

. , <body> :

  • BGCOLOR
  • MarginBottom
  • MarginLeft
  • marginright
  • MarginTop

CSS , background-color <body> , . background-color html, .

, HTML .

+1

, . div, id, , . .

<body>
    <div class="some">Hello World!</div>
</body>

.some{
   background-color: red;
}

<body>
    <div id="some">Hello World!</div>
</body>

#some{
   background-color: red;
}
0

CSS- . , html, :

html , . CSS : root.

0

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


All Articles