使子元素高度大于父元素

Question

我不确定自己的想法是否完全正确，但希望得到指导。我想让一个子 div 比其父 div 更大。

请查看图片以获取我想要实现的效果：

然而，容器元素的高度将更小。我是否应该将它们作为单独的元素，还是有更好的实践方式？

- Cactus

---

我会创建一个容器元素，将其设置为position:relative，然后在CSS中将其他元素设置为position:absolute，并设置元素内部的top:和left:属性。 - StackSlave

Answer 1

您可以使用 position 来达到想要的效果。我建议采用 position 和负 margin 的组合来实现目标:

.parent {background-color: #000; height: 100px;}
.parent .child {height: 200px; background-color: #ccc; width: 75%; margin: auto;}

.parent {margin-top: 100px;}
.parent .child {position: relative; top: -50%;}

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

预览:

如果您不知道内容的高度，可以使用translate将其修正为居中:

.parent {background-color: #000; width: 75%; margin: auto;}
.parent .child {height: 200px; background-color: #fff; width: 75%; margin: auto;}

.parent {margin-top: 100px; position: relative; min-height: 100px;}
.parent .child {position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);}

- Praveen Kumar Purushothaman

Answer 2

只需使用 transform: scale(1.2); 转换您的子元素即可。

#parent{
  margin: 40px;
  background:#000;
}
#child{
  background:#d8d8d8;
  height:140px;
  box-shadow: 0 0 40px rgba(0,0,0,0.2);
  position:relative;
  margin:0 auto;
  width:60%;
  transform:scale(1.2); -webkit-transform:scale(1.2);
}

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

- Roko C. Buljan