What should I do if the css height setting percentage does not take effect?

The reason why it does not take effect: The height of its parent element is not determined, so the "height:XX%" style cannot be used effectively. Solution: Use the height attribute to set a certain height for the parent element, so that the height setting percentage of the child element can take effect.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

When we set responsive heights for block-level elements, such as setting height:50% to divs, we often fail to see the effect.

The reason is that the percentage size is relative to the width and height of its parent element. For example, the percentage set by the outermost element corresponds to the screen.

What you need to understand is that for width, its parent element can set the percentage without determining the width

But the height is different. Ifthe parent element of an element does not determine the height, Then the height:XX% style cannot be used effectively! ! !

After reading the above paragraph, I tried to add body{heigh: 100%}, but it didn’t work...

Let’s think about it carefully~~ ~, has the height of the parent element of body been determined? ? ? ? ? ? No~~So it still has no effect

So we still need to set the height of the html element! ! Or set the height percentage in *{}

The code is as follows

*{
	margin:0px;
	padding: 0px;
}
html,body{
	margin: 0px;
	background:url(../img/body_bg.jpg) no-repeat 0 0;
	width:100%;
	height:100%;
}
.nav{
	width:100%;
	height:20%;
	border: 1px solid red;
}
.nav>img{
	width:100%;
	height: 100%;
}

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of What should I do if the css height setting percentage does not take effect?. For more information, please follow other related articles on the PHP Chinese website!