Home >Web Front-end >HTML Tutorial >How to solve the height problem of html and body elements

How to solve the height problem of html and body elements

云罗郡主forward: 2018-11-23 15:46:113215browse

The content of this article is about how to solve the height problem of html and body elements. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all: html elements and body elements are both block-level elements.

Brief description: Sometimes we will find that height: 100% is not set, but the height of the html and body elements is the height of the current window. It looks like height: 100% is set.

Look at the following two examples:

Example 1:

<html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
height: 30%;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>

At this time, the height of the container is 30% of the window height, and the height of the html and body elements are both the window the height of.

Example 2:

<!DOCTYPE html>
<html>
  <head>
    <title>demo</title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      height: 30%;
    }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

At this time, the height of the container is 0, the set height: 30% does not take effect, and the heights of the html and body elements are both 0.

Reason: Example 1 does not set the current document type, and the compatibility mode is enabled by default. The height of the html and body elements in the compatibility mode is the height of the window, while Example 2 sets and enables it. Standard mode, and the height of html and body elements in standard mode is 0.

The above is a complete introduction to how to solve the height problem of html and body elements. If you want to know more about Html5 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to solve the height problem of html and body elements. For more information, please follow other related articles on the PHP Chinese website!

php html5 html

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：What does namespace mean? What does namespace do?Next article：What does namespace mean? What does namespace do?

See more

How to solve the height problem of html and body elements

Related articles