html行高与父div一样,CSS子元素跟父元素的高度一致的实现方法

编程入门 行业动态 更新时间:2024-10-08 00:29:08

html行高与父div一样,CSS子<a href=https://www.elefans.com/category/jswz/34/1771401.html style=元素跟父元素的高度一致的实现方法"/>

html行高与父div一样,CSS子元素跟父元素的高度一致的实现方法

这篇文章主要介绍了CSS子元素跟父元素的高度一致的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

绝对定位方法:

(1)将父元素设置为相对定位,不写父元素的高度时,会随着左边的子元素高度变化而变化

.parent {

/*关键代码*/

position: relative;

/*其他样式*/

width: 800px;

color: #fff;

font-family: “Microsoft Yahei”;

text-align: center;

}

(2)左边一个元素有个最小高度的情况

.left {

min-height: 700px;

width: 600px;

}

(3)右边元素要想跟父元素的高度是一致,那么可以用绝对定位这样设置,如果不想同时写top和bottom,写一个时,再写上height:100%,也可以达到一样的效果

.right {

/*关键代码*/

width: 200px;

position: absolute;

top: 0;

right: 0;

bottom: 0;

/*其他样式*/

background: #ccc;

}

(4)完整例子代码:

子元素高度与父元素一致

.parent{

position: relative;

bac

更多推荐

html行高与父div一样,CSS子元素跟父元素的高度一致的实现方法

本文发布于:2024-02-19 14:14:28,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1764757.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:元素   高度   方法   html   div

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!