html - 如何将父级的高度设置为自动减去像素？

Question

考虑以下因素:

CSS:

#parent {
   overflow: hidden;
}

HTML:

<div id="parent">
   <div id="child"></div>
</div>

目标:我想隐藏 <div id="child"></div> 的底部 20 个像素.

限制:我不知道 <div id="child"></div> 的高度事先。

问题:如果我不知道 <div id="child"></div> 的高度事先如何设置<div id="parent"></div>比 <div id="child"></div> 短 20px ？

限制:我不想使用JS获取高度<div id="child"></div>创建后，然后将高度设置为 <div id="parent"></div>到该高度-20px。我知道这是显而易见的解决方案，但我的网站上出现了太多上述问题，以至于每次都必须执行相关的 JS。

预先感谢您的帮助! :-)

Answer 1

这是一种实现方法。使用 position:relative 将 #child 元素向下移动 20px；

在 #parent 元素上，添加 margin-top: -20px 以使内容的上边缘与 父 block 的上边缘。

body {
    margin: 0;
}
#parent {
    overflow: visible;
    border: 1px dotted blue;
    margin-top: -20px;
    overflow: hidden;
}
#child {
    border: 1px dashed green;
    position: relative;
    top: 20px;
}

<div id="parent">
    <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus odio, ornare et neque in, sollicitudin ornare erat. Sed vel nisl vehicula, tempus nulla non, sodales orci. Pellentesque aliquam porttitor euismod. Nam imperdiet sit amet lectus sed vulputate. Sed varius vestibulum urna, quis consequat arcu mollis sed. Aenean pulvinar a magna non cursus. In hac habitasse platea dictumst. Proin elementum ipsum urna, non viverra nisi congue ut.</div>
</div>