css中⼦元素根据⽗元素设置百分⽐⾼度的问题。
之前⽤css的flex设置了⼀系列a标签，在a标签中准备再嵌套⼏个div，使a标签的样式更好看⼀点。先给⼤家看看之前我写的代码。
<style>
好看的css代码
.bottom_menu
{
display:-webkit-box;
display:-moz-box;
height:14%;
width:100%;
border:1px solid black;
}
.bottom_menu_a
{
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
border:1px solid black;
}
.bottom_pic
{
width:100%;
height:70%;
}
</style>
<body>
<div class="bottom_menu">
<a href="#" class="bottom_menu_a">
<div class="bottom_pic">
</div>
</a>
</div>
<body>
但是运⾏出来的效果就是.bottom_pic的⾼度设置没有效果，宽度是有效果的。
原因就是：⼦元素的百分⽐⾼度是根据⽗元素的⾼度来确定的，当⽗元素的⾼度为不确定值时，或者
说⽗元素的⾼度未定义时，⼦元素的⾼度百分⽐将没有⽤（没有参照物）。所以只要设置了⽗元素的⾼度，⼦元素的⾼度百分⽐才会有⽤。
所以说上述代码中，只要把.bottom_pic的⽗元素的⾼度定义了就可以了。
所以只需要在.bottom_menu_a的css样式中加上⼀句：
height:100%;
这样就可以了。也就是我们所说的定义⽗元素的⾼度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。