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？< / p>

限制：我不想在创建高度<div id="child"></div>后使用JS获取高度<div id="parent"></div>，然后设置{{1}}的高度到那个高度减去20px。我知道这是一个显而易见的解决方案，但在我的网站上出现上述问题太多，每次都必须执行相关的JS。

提前感谢您的帮助！： - ）

Answer 1

这是一种做法。使用position: relative将#child元素向下移动20px;

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

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>

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

1 个答案: