javascript - Make child height larger than parent -

not sure if i'm thinking of entirely wrong way guidance appreciated. i'm trying child div larger it's parent.

please see image i'm trying achieve

however height on container element smaller. right in thinking should have them separate elements or there better practice way?

you can use position , achieve want. say, combination of position, negative margin 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 don't know height of content, can use translate fix 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%);}