Yes I have understood correctly, do you want the div color black and blue, always have the height of the yellow div and you only have to use css?
Have you tried with flex?
To the main container, you should only apply:
.container{
display: flex;
align-items: stretch;
}
This forces the children, in this case black and blue to take the same height as the father.
And if you give a height to yellow , then this is the only one that determines the height of black and blue **.
Now, if you are not going to declare or assign any height to the yellow element, it will continue to work as long as you keep it contained, that is, if it is only going to grow with a text that you put inside, this same size will have both the black element and the yellow element.
Other things you can try is to use variable css (custom properties), in which you can do something like this:
.contenedor-principal{
-altura-yellow: 100px;
}
.negro{
height: var(--atura-yellow);
}
.yellow{
height: var(--altura-yellow);
}
Or if you are going to assign the size of yellow dynamically by means of js, you can use the variable, like this:
<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>
Or combine the two, something like this:
*{
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>
See how it also grows without needing to assign height, only yellow content:
*{
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>
Just in case, I put your code here below, so you can see how I propose it:
<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>
If it is not this, you could better explain what you want to achieve because we still do not understand.