我需要在 2 个主 div 之间放置一个子 div，我想用父 div 来获取 child 的高度。
它应该是这样的:
子容器(黄色)相对于白色的第二部分放置，顶部为 -100px
但是，父白色不带子高度，它将最后一节蓝色带上去。
我检查了其他建议向父 div 添加 padding-bottom % 的线程，这有效，但在响应中仍然中断并将容器定位在最后一部分之上。
<!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。
最佳答案
试试这个(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();
});
});
关于html - css 将父 div 扩展到子高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50028466/