子元素如何使用父元素的高度?

<div class="first">
    <div class="second">
      Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi
      以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。

      Umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 3000+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS
      应用等。他已经很好地服务了我们的内部用户,同时希望他也能服务好外部用户。
    </div>
  </div>
<style>
    .first {
      width: 100px;
      height: 200px;
      background-color: lightblue;
      overflow: auto;
    }

    .second {
      /* width: 100%; */
      height: 100%;
      background-color: lightcoral;
    }
  </style>

希望是second的高度是200px,但是由于second的内容过多,高度大于了200px,怎么设置才能让让second的高度和first保持一致,在不设置具体值的情况下。

阅读 2.6k
3 个回答

你这样写就是已经用了父元素的高度了,不过你没有设置子元素溢出的情况,在父元素加上overflow属性就可以了

试试内层的height: inherit

子元素高度溢出,除非设置overflow为auto或scroll使其可滚动,才能保证高度和父元素一致。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题