Directory structure:
contents structure [-]
| value | description |
| ##auto | Default |
| Absolute length | |
| Relative length | |
| Inherit |
Usage of the % value of height
Example:
<!DOCTYPE html><html>
<head>
<title>height.html</title>
<meta name="content-type" content="text/html; charset=UTF-8"><style>p{
width:50%;
height:50%;
border:1px solid red;}body{
border:1px solid green;
display:block;
height:100px;}</style></head><body><p>I am box with width 50% and height 50%</p></body></html>Chrome browser and select "element" to view. Readers can easily Quickly find that the height of is exactly 50% of the parent element
Things to note
In the above example, we verify Understand the usage of the relative value of height. However, readers need to note that if the parent element does not define hight, the height of the child element using percentage will not work. At this time, the height value is equivalent to the auto value, unless it is changed by an absolute value. Here, hight is not defined, which means that height is not written at all, which is different from defining height as 0px. Readers can try the following code: Then remove the style attribute of the body and try again. <body id="b" style="width:0px;height:0px;">
<br>
<p id="er" style="width:50%;height:50%;border:1px solid red;"></p>
Copy after login
<body id="b">
The above is the detailed content of Detailed explanation of the hight attribute in CSS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
