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>
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
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!