Make child height larger than parent

Question

Not sure if I'm thinking of this the entirely wrong way but some guidance would be much appreciated. I'm essentially trying to get a child div larger than it's parent.

Please see image for what I'm trying to achieve

However the height on the container element will be smaller. Am I right in thinking I should have them as separate elements or is there a better practice way?

Answer 1

You can use position and achieve what you want. I would say, a combination of position, negative margin will do the trick:

.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>

Preview:

If you don't know the height of the content, you can use translate to fix it to the centring:

.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%);}

Answer 2

Simply transform: scale(1.2); your child element

#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>