如何让孩子div的高度高于父div？

Question

我已经看到了将此元素的宽度设置为另一个元素宽度的方法，但我还没有看到为高度做这个的方法。 有人可以用高度来解释如何做到这一点吗？

Answer 1

  

从下次开始，请包含您尝试过的内容。 StackOverflow 不是免费的编码服务。

您需要在此使用position：

.parent {position: relative; margin: 100px; border: 2px solid #333; text-align: center; height: 150px;}
.parent .child {position: absolute; border: 2px solid #999; height: 250px; top: -50px; left: -2px;}

<div class="parent">
  Parent Div
  <div class="child">Child Div</div>
</div>

预览

我想使用相对值为Joseph-Marikle提供完整的学分，以尝试这样的精彩内容。

body {
  background: #aaa;
}
.parent {
  width: 80vw;
  height: 20vw;
  background: #fff;
  margin: 15vw auto;
  box-shadow: 0 0 2em 0 rgba(0,0,0,0.2);
  position: relative;
}
.child {
  position: absolute;
  width: 25%;
  top: -50%;
  height: 200%;
  background: rgba(255,0,0,0.2);
}

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

我真的很想欣赏这些颜色组合。 :)

预览

Answer 2

作为position元素的替代方法，您只需执行此操作，但可以使子元素具有更多height。否定margin是可接受的值，请确保overflow上的parent为visible（这是default value）。

<强> DEMO

body {
  padding-top: 75px;
}
div {
  border: 1px solid black;
  height: 200px;
}

.parent {
  overflow: visible;
}

.child {
  border-color: red;
  width: 100px;
  height: 300px;
  margin-top: -50px;
}

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