Force Bootstrap div to expand vertically when using absolutely positioned content

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:


    
        
             
            
                Kittens Kittens
            
        
    



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


    
        
             
            
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium

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

user_3187127 · Answer

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;
  }
}







  
    
      
      
        Kittens Kittens
      
    
  



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


  
    
      
      
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium

user_12172697 · Answer

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;
  }
}

Force Bootstrap div to expand vertically when using absolutely positioned content

2 Answers