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

最新推荐文章于 2024-08-20 23:30:49 发布

BuBu高打火机

最新推荐文章于 2024-08-20 23:30:49 发布

阅读量2.3w

点赞数 1

分类专栏： CSS 文章标签： CSS 网页

本文链接：https://blog.csdn.net/fd214333890/article/details/41702841

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

之前用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样式中加上一句：