Solution to the problem of div height 100% under declaration

高洛峰
Release: 2017-03-23 09:08:14
Original
2564 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:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template