margin+padding实现等高布局

最新推荐文章于 2023-01-02 23:43:49 发布

少油少盐不要辣

最新推荐文章于 2023-01-02 23:43:49 发布

阅读量750

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/qq_40713392/article/details/85567678

版权

css 同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

如下图所示：一个子元素随着新闻内容自动撑开，另一个要求保证与其有一样的高度。那么如何做到呢？
在这里插入图片描述

解决办法：
假设新闻动态所在的最大父元素为<div class="navLeft">...</div>
假设要展示新闻详情内容的公司新闻所在的最大父元素为<div class="contentRight">...</div>
它们共同的父元素为<div class="parent">...</div>
可用如下css样式解决：

.parent{
 ...;
 height:auto;
 overflow:hidden;
}
.nav{
...;
 padding-bottom:9000px;//这里的值只要保证大于右边详情内容的最大高度就行
 margin-bottom:-9000px;//这里的值用于抵消上面的值产生的巨大高度，这里只要保证抵消的长度，能够让页面底部触及到右边详情内容即可
}
.contentRight{
...;
height:auto;
}