<!DOCTYPE html>
<html>
<head>
<style>
.main_box{
width:400px;
border:1px solid #000000;
}
.option-heading{
width:292px;
border:1px solid #000000;
background-color:#FFCC00;
overflow:auto;
padding:4px
}
.option-content{
width:300px;
height:300px;
border:1px solid #000000;
background-color:#8AC007;
}
.arrow-up{width:25px;float:right;}
.arrow-down{width:25px;float:right;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arrow-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(500);
$(this).find(".arrow-up, .arrow-down").toggle();
});
});
</script>
</head>
<body>
<div class="main_box">
<div class="option-heading">
<div class="arrow-up"><img src="Untitled.png"></div>
<div class="arrow-down"><img src="Untitledone.png"></div>
</div>
<div class="option-content"></div>
</div>
</body>
</html>
当我单击“option-heading”div 时，“option-content”div 会向上滑动，但“main_box”div 的高度也会发生变化。我想在“option-content”div 向上滑动后保持“main_box”div 的高度不变。
有人知道怎么做吗？
最佳答案
你可以很容易地做到这一点，你只需要将 min-height 设置为 .option-heading、.option-content 和 border size 的任何高度总和，所以它是 336px
更新 .main_box 的样式
.main_box {
width: 400px;
border: 1px solid #000000;
min-height: 336px;
}
关于javascript - 子div向上滑动后如何保持父div的高度不变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26884732/