请选择 进入手机版 | 继续访问电脑版

我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

css 如何实现子元素继承父元素的高度-高度继承

当父元素body中有两个class分别为left和right的子元素,设置class为left的元素高度为300px,right元素不设置高度。
想让right元素的的高度自动填充为父元素的高度,该怎么实现呢?

现状图:

子元素继承父元素的高度

子元素继承父元素的高度

现状CSS代码:
  1. .body{
  2. width: 600px;
  3. margin:0 auto;
  4. overflow: hidden;
  5. }
  6. .left{
  7. width: 50%;
  8. height: 300px;
  9. background-color: gray;
  10. float: left;
  11. }
  12. .right{
  13. width: 50%;
  14. float: right;
  15. background-color: blue;
  16. }
复制代码
实现图:

子元素继承父元素的高度

子元素继承父元素的高度


实现代码:
  1. .body{
  2. width: 600px;
  3. margin:0 auto;
  4. <font color="#ff0000">position: relative;</font>
  5. overflow: hidden;
  6. }
  7. .left{
  8. width: 50%;
  9. height: 300px;
  10. background-color: gray;
  11. float: left;
  12. }
  13. .right{
  14. width: 50%;
  15. <font color="#ff0000">position: absolute;
  16. right: 0px;</font>
  17. background-color: blue;
  18. <font color="#ff0000">height: 100%;</font>
  19. }
复制代码



点击阅读更多内容!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2024-3-28 22:39 , Processed in 0.084145 second(s), 27 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

本站大部分教程是网站原创教程,一部分教程为我爱自学(http://www.5izixue.com)编辑收集整理。

如果您需要转载我爱自学网站教程,请注明“资料来源:我爱自学(5izixue)”字样并注明本站网址。

编辑收集整理的教程版权归原作者所有,本站只提供网友交流学习使用,请勿用于商业用途,如果该文章有任何侵犯您权益的地方,请联系我们(569705694@qq.com),我们将在第一时间进行处理!谢谢您的支持!

快速回复 返回顶部 返回列表