您现在的位置是：网站首页> 编程资料编程资料

CSS子元素跟父元素的高度一致的实现方法CSS子元素选择父元素的实现解决CSS中子元素z-index与父元素兄弟节点的层级问题css中子元素设置margin-top为什么影响了父元素CSS如何只改变父元素背景透明度不改变子元素透明度css匹配选择属于其父元素的第N个子元素的方法父元素与子元素之间的margin-top问题(css hack)css子元素相对父元素进行定位的实现

2023-10-17 457人已围观

简介这篇文章主要介绍了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）完整例子代码：

子元素高度与父元素一致 左侧 left 不定高,parent的高度随着左侧left 的高度变化而变化，右侧也跟着变 
 这边的高度跟父元素高度一致

（5）效果

（6）问题来了：

如果右侧的子元素高度超出了.parent，怎么办？

 .right-inner { background: limegreen; height: 1024px; }

right的子元素，高度为1024px，会撑破容器，给.right加上 overflow:auto 就防止溢出了

效果图如下：

完整代码：

子元素高度与父元素一致 左侧 left 不定高,parent的高度随着左侧left 的高度变化而变化，右侧也跟着变 
right的子元素，高度为1024px，会撑破容器，给.right加上 overflow:auto 就防止溢出了

（7）其他资源

到此这篇关于CSS子元素跟父元素的高度一致的实现方法的文章就介绍到这了,更多相关CSS子元素父元素高度内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！