Question

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

当我点击＆＃34;选项标题＆＃34; div，＆＃34; option-content＆＃34; div向上滑动，但也是＆＃34; main_box＆＃34;的高度。 div改变了。我想保持＆＃34; main_box＆＃34;的高度。＆＃34;选项 - 内容＆＃34;之后的div相同div滑了起来。

有谁知道怎么做？

Answer 1

你可以轻松地完成它，你只需要将min-height设置为.option-heading，.option-content和border size的高度总和，这样它的336px

所以更新.main_box的样式

.main_box {
width: 400px;
border: 1px solid #000000;
min-height: 336px;
}

Answer 2

使用min-height属性。它允许您设置给定元素的最小高度。

.main_box {
     min-height: 300px;
}

Answer 3

    .main_box{
     min-height:300px;
     height:auto;
    }

使用height:auto

在子div滑动后如何保持父div的高度相同？

3 个答案: