Home > Article > Web Front-end > Solution to the problem of div height 100% under declaration
Solution to the problem of div height 100% under declaration
- 高洛峰Original
- 2017-03-23 09:08:142515browse
When using HTML code to create a web page, if 8b05045a5be5764f313ed5b9168a17e6 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>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 dc6dce4a544fdca2df29d5ac0ea9906b tag is 6c04bd5ca3fcae76e30b72ad730ca86d. We naively think that the height of the 6c04bd5ca3fcae76e30b72ad730ca86d tag does not need to be defined. It is precisely because the height of the 6c04bd5ca3fcae76e30b72ad730ca86d tag is not defined that the dc6dce4a544fdca2df29d5ac0ea9906b is displayed. unusual. Add a parameter body {height:100%;} in css, preview, the result is: still nothing!
Why? Although the height of the 6c04bd5ca3fcae76e30b72ad730ca86d tag is set to 100%, the 6c04bd5ca3fcae76e30b72ad730ca86d tag is the 100db36a723c770d327fc0aef2ce13b1 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!