Force Bootstrap div to expand vertically when using absolutely positioned content - html

Question

How can I force the middle div to expand vertically on screen sizes smaller than 1000px and not flow the text under the image in the third div?
Clearing floats doesn't have an effect.
This is Bootstrap 4.4.1.
https://jsfiddle.net/o4h0czv7/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<img class='img-fluid' src="https://placekitten.com/1400/300" />
<div class="title">
Kittens Kittens
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-12 text-center">
<div class="row">
<img class='img-fluid' src="https://placekitten.com/1400/400" />
<div class="text">
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-12 text-center">
<div class="row">
<img class='img-fluid' src="https://placekitten.com/1400/250" />
<div class="text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</div>
</div>
</div>
</div>
CSS:
body {
height: 100%;
font-size: 16px;
color:#fff;
overflow: none;
}
.text {
position: absolute;
top:0;
left:0;
right: 0;
height: 100%;
}
.title {
position: absolute;
top:10%;
left:0;
right: 0;
height: 100%;
}

Answer 1

Added .middle-block class for a middle container and #media (max-width: 1000px) {...} to determine changes on screens less than 1000px.
Here you can see the .middle-block .text is now relative, and .middle-block .img-fluid is absolute. So now the height of the block depends on .middle-block .text height.
Because of position: absolute combined with object-fit: cover; - the .middle-block .img-fluid starts to act like background image with background-size: cover;
body {
height: 100%;
font-size: 16px;
color: #fff;
overflow: none;
}
.text {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
}
.title {
position: absolute;
top: 10%;
left: 0;
right: 0;
height: 100%;
}
#media (max-width: 1000px) {
.middle-block .text {
position: relative;
height: auto;
z-index: 2;
}
.middle-block .img-fluid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
object-fit: cover;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<img class='img-fluid' src="https://placekitten.com/1400/300" />
<div class="title">
Kittens Kittens
</div>
</div>
</div>
</div>
<div class="container-fluid middle-block">
<div class="col-12 text-center">
<div class="row">
<img class='img-fluid' src="https://placekitten.com/1400/400" />
<div class="text">
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-12 text-center">
<div class="row">
<img class='img-fluid' src="https://placekitten.com/1400/250" />
<div class="text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</div>
</div>
</div>
</div>

Answer 2

You must add the a new class to the div that you want to take the properties that you need, in this example is the middle one:
I added the class middleCat.
It uses the #media rule to include a block of CSS properties only if a certain condition is true.
How can I force the middle div to expand vertically on screen sizes
smaller than 1000px and not flow the text under the image in the third
div?
If you are talking about the horizontal pixels you will need:
#media only screen and (max-width: 1000px) {
.middleCat{
min-height:100vh;
}
}
Instead if you are refering to the vertical pixels you will need:
#media only screen and (max-height: 1000px) {
.middleCat{
min-height:100vh;
}
}