CSS父元素被子元素撑大，另外子元素高度百分比不生效

最新推荐文章于 2023-06-27 17:44:30 发布

仙女叔叔

最新推荐文章于 2023-06-27 17:44:30 发布

阅读量881

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_52070860/article/details/126617736

版权

问题：当父元素没有height，而且被子元素撑大，另外的子元素的height百分比不起作用

代码示例：

  <style>
    .parent {
      width: 300px;
      background-color: aqua;
      display: flex;
    }

    .child1 {
      width: 100px;
      height: 300px;
      background-color: bisque;
    }

    .child2 {
      width: 100px;
      height: 100%;
      background-color: brown;
    }
  </style>

<body>
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>

看一下显示的效果：发现child2虽然有height:100%，但是实际高度是0px，说明height:100%未生效；

解决方案：可以用position去将父元素作为参照物

代码示例：

  <style>
    .parent {
      width: 300px;
      background-color: aqua;
      display: flex;
      position: relative;
    }

    .child1 {
      width: 100px;
      height: 300px;
      background-color: bisque;
    }

    .child2 {
      width: 100px;
      height: 100%;
      background-color: brown;
      left: 100px;
      position: absolute;
    }
  </style>

<body>
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>

看一下显示的效果：发现child2的height:100%生效了

仙女叔叔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS父元素被子元素撑大，另外子元素高度百分比不生效

看一下显示的效果：发现child2虽然有height:100%，但是实际高度是0px，说明height:100%未生效；看一下显示的效果：发现child2的height:100%生效了。
复制链接

扫一扫