之前用css的flex设置了一系列a标签,在a标签中准备再嵌套几个div,使a标签的样式更好看一点。先给大家看看之前我写的代码。
<style>
.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%;
这样就可以了。也就是我们所说的定义父元素的高度。