Question

我需要在2个主要div之间放置一个子div，我想让父div获取孩子的身高。

它应该如何：子容器（黄色）相对于白色第二部分放置，顶部为-100px 但是，父母的白色不会占用孩子的高度，它会使最后一部分变为蓝色。我检查了其他线程，建议添加padding-bottom％到父div工作，但在响应仍然中断并将容器放在最后一节上方。

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

如何让父div占用子div的高度？我正在使用bootstrap 4。

Answer 1

试试这个（JS解决方案）

检查演示Here

CSS：

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

JS：

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

css将父div扩展为子高度

1 个答案: