css中子元素根据父元素设置百分比高度的问题。

来源：互联网发布：飞狐软件编辑：程序博客网时间：2024/05/21 16:22

之前用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%;

这样就可以了。也就是我们所说的定义父元素的高度。

0 0