CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
KevinM
KevinM

Reputation: 329

css expand parent div to child height

I need to place a child div between 2 main divs and I want to take the parent div to take the child's height.

How it should look like:enter image description here The child container (yellow) is placed relative to the white second section and a top of -100px However, the parent white does not take the child height, it brings the last section blue up. enter image description here I checked other threads recommending to add a padding-bottom % to parent div which works, but in responsive still breaks and position the container above the last section. enter image description here 

              <!doctype html>
          <html lang="en">
            <head>
              <title>Hello, world!</title>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

              <!-- Bootstrap CSS -->
              <link rel="stylesheet" href="css/bootstrap.min.css">


               <style>
                  .secposition{
                  position:relative;
                  }
                  .contposition{
                  position:absolute;
                    z-index:1;
                    top:-100px;
                  }
                  .columh{
                    height:200px;
                  }
                  section.sech{
                    height:50vh;
                  }
                  .sech2{
                    padding-bottom:20%;
                  }
               </style> 
                </head>
                <body>
                    <section class="container-fluid bg-success sech">
                     First section
                    </section>
                    <section class="container-fluid bg-light secposition sech2 d-flex justify-content-center">
                     <div class="container contposition ">     
                      <div class="row d-flex justify-content-center ">
                          <div class="col-md-6 bg-warning columh">
                            Container with variable height content   
                          </div>
                      </div>
                     </div>
                    </section>
                    <section class="container-fluid bg-primary sech">
                      Third section
                    </section>

              <!-- Optional JavaScript -->
              <!-- jQuery first, then Popper.js, then Bootstrap JS -->
              <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
              <script src="js/bootstrap.min.js"></script>
              <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
              <script src="js/parallax.js"></script>
            </body>
          </html>

How do I make the parent div take the height of the child div? I'm using bootstrap 4.

Upvotes: 0

Views: 288

Answers (1)

Jyoti Pathania
Jyoti Pathania

Reputation: 5004

Try this (JS Solution)

Check Demo Here

CSS:

.sech2 {
  /*padding-bottom: 20%;*/
}

JS:

function changeParentHeight() {
  let getChildHeight = $(".columh").outerHeight();
  $(".sech2").css("height", getChildHeight);
}
$(function() {
  changeParentHeight();
  $(window).on("resize", function() {
    changeParentHeight();
  });
});

Upvotes: 1

Related Questions