How to solve the height problem of html and body elements-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to solve the height problem of html and body elements

云罗郡主

Nov 23, 2018 pm 03:46 PM

body html high

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.

How to solve the height problem of html and body elements

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>

Copy after login

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>

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn