Sí he entendido bien, quieres que el div color negro y el azul, siempre tengan la altura del div amarillo y que solo tengas que usar css?
Has probado con flex?
Al contenedor principal, solo debes aplicarle:
.container{
display: flex;
align-items: stretch;
}
Esto obliga a los hijos, en este caso negro y azul a tomar la misma altura del padre.
Y si le das una altura al amarillo, pues esta es la única que determina la altura de negro y azul**.
Ahora, si no vas a declarar o asignar ninguna altura al elemento amarillo, va a seguir funcionando siempre y cuando le metas contenido, es decir, si solo va a crecer con un texto que coloques dentro, este mismo tamaño va a tener tanto el elemento negro como el amarillo.
Otra cosas que puedes intentar es usar variable css (custom properties), en las cuales puedes hacer algo como esto:
.contenedor-principal{
-altura-yellow: 100px;
}
.negro{
height: var(--atura-yellow);
}
.yellow{
height: var(--altura-yellow);
}
O sí vas asignar el tamaño de amarillo dinamicamente mediante js, puedes usar la variable, así:
<div class="contenedor" style="-altura-yellow: 100px">
<div class="blue" style="height: var(--altura-yellow)">
<div class="black" style="height: var(--altura-yellow)">
div class="yellow" style="height: var(--altura-yellow)">
</div>
</div>
O combinar las dos, algo así:
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container{
display: flex;
align-items: stretch;
--h: 120px;
}
.col{
width: 50%;
}
.blue{
background-color: blue;
}
.black{
background-color: black;
}
.yellow{
transform: translateY(50px);
background-color: yellow;
height: var(--h);
}
<div class="container">
<div class="col blue">
</div>
<div class="col black">
<div class="yellow">
</div>
</div>
</div>
Mira como también crece sin necesidad de asignar altura, solo contenido a amarillo:
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container{
display: flex;
align-items: stretch;
}
.col{
width: 50%;
}
.blue{
background-color: blue;
}
.black{
background-color: black;
}
.yellow{
transform: translateY(50px);
background-color: yellow;
font-size: 20vmin;
}
<div class="container">
<div class="col blue">
</div>
<div class="col black">
<div class="yellow" contenteditable>
Aqui va a ir X contenido, sí quieres escribe algo, este elemento es editable para poder hacer un mejor ejemplo
</div>
</div>
</div>
Por si acaso, pongo tu mismo código acá abajo, para que veas como te lo propongo:
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="home.css" rel="stylesheet">
</head>
<body>
<div class="container" style="--y: 600px">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6" style="width: 50%; height: var(--y); background-color: blue;">
</div>
<div class="col-md-6 col-sm-6 col-xs-6" style="width: 50%; height: var(--y); background-color: black;">
<div style="position: relative; top: 50px; background-color: yellow; height: var(--y);">
<h2 style="font-size: 100px; color: black;">CUADRO AMARILLO</h2>
</div>
</div>
</div>
</div>
</body>
</html>
Si no es esto, podrías explicar mejor que quieres lograr porque seguimos sin comprender.