Html css将父div展开为子高度
我需要在两个主div之间放置一个子div,并且我希望使用父div来获取子div的高度 它应该是什么样子的: 黄色子容器相对于白色第二部分和-100px顶部放置 但是,父级白色不考虑子级的高度,它会使最后一部分变蓝。 我检查了其他线程,建议将padding bottom%添加到parent div中,这是可行的,但在responsive中仍然会中断,并将容器放置在最后一部分的上方。 如何使父div取子div的高度?我正在使用bootstrap 4。试试这个JS解决方案 检查演示 CSS: JS:Html css将父div展开为子高度,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我需要在两个主div之间放置一个子div,并且我希望使用父div来获取子div的高度 它应该是什么样子的: 黄色子容器相对于白色第二部分和-100px顶部放置 但是,父级白色不考虑子级的高度,它会使最后一部分变蓝。 我检查了其他线程,建议将padding bottom%添加到parent div中,这是可行的,但在responsive中仍然会中断,并将容器放置在最后一部分的上方。 如何使父div取子div的高度?我正在使用bootstrap 4。试试这个JS解决方案 检查演示 CSS: JS:
<!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>
.sech2 {
/*padding-bottom: 20%;*/
}
function changeParentHeight() {
let getChildHeight = $(".columh").outerHeight();
$(".sech2").css("height", getChildHeight);
}
$(function() {
changeParentHeight();
$(window).on("resize", function() {
changeParentHeight();
});
});