<!DOCTYPE html> Solution to the problem of div height 100% under declaration-HTML Tutorial-php.cn

Solution to the problem of div height 100% under declaration

高洛峰

Release： 2017-03-23 09:08:14

Original

2578 people have browsed it

When using HTML code to create a web page, if is declared and a div in the code has a height set to 100%, abnormal display may occur. For example, the following code:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {margin:0px;padding:0px;}
            div {
                background-color:red;
                width:200px;
                height:100%;
                }
    </style>
</head>
<body>
            <div></div>
</body>
</html>

Copy after login

The displayed result is: nothing! Why?

The reason is that the HTML5 standard requires that when the height or width is set to a percentage, the parent tag is referenced. If you understand this sentence, the problem will be easier to solve. The parent tag of the

tag is . We naively think that the height of the tag does not need to be defined. It is precisely because the height of the tag is not defined that the

is displayed. unusual. Add a parameter body {height:100%;} in css, preview, the result is: still nothing!

Why? Although the height of the tag is set to 100%, the tag is the tag, and the height of this tag also needs to be defined. So the final parameters to be added are html, body {height:100%;}

Please note that there is a comma between html and body, not a space. Explain that this is a multi-label selector, not a derived selector.

The above is the detailed content of Solution to the problem of div height 100% under declaration. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

html

source：php.cn

Previous article：How to use document.body Next article：Web basics: use of html|css

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