设置子div的高度等于其父div答案

【问题标题】：Setting height of child divequal to its parent div设置子div的高度等于其父div
【发布时间】：2017-07-13 23:56:19
【问题描述】：

我有一个 div 标签，其中有一个面板是手风琴。现在我的 div 标签高度是动态的，它取决于数据，面板固定在 div 顶部，点击时会扩展一些子数据。我想将面板的高度设置为其父 div。注意 div 高度是动态的。

.menuboxcontent {
  background-color: deepskyblue;
  color: white;
  text-align: center;
 
  margin: 10px 0px;
 position:relative;
  height: 100%;
  padding: 20px ;
  color: #fff;
}
.collapse {
  text-align: left;
 height: auto;
 
  padding: 20px 10px;
  margin: 0;
}

var boxheight = $('.menuboxcontent').height();

$('.collapse').on('show.bs.collapse', function() {

  $(this).parent().find('.glyphicon-menu-down').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-up');

  $(this).parent().('.collapse').css('height', boxheight + 'px');

})

$('.collapse').on('hide.bs.collapse', function() {

  $(this).parent().find('.glyphicon-menu-up').removeClass('glyphicon-menu-up').addClass('glyphicon-menu-down');

  $(this).parent().('.collapse').css('height', (boxheight * 0.1) + 'px');

})

.menuboxcontent {
  background-color: deepskyblue;
  color: white;
  text-align: center;
  margin: 10px 0px;
  position: relative;
  height: 100%;
  padding: 20px;
  color: #fff;
}

.collapse {
  text-align: left;
  height: auto;
  padding: 20px 10px;
  margin: 0;
}

.submenupanelgroup {
  padding: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
}

.sub.sub-subitem {}

.sub-subitem li a,
.submenudropdown a {
  color: white;
}

.submenudropdown a {
  padding: 0;
  margin: 0;
  line-height: 14px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<div class="menuboxcontent">

  <div id="accordion" class="panel panel-group submenupanelgroup">
    <div class=" collapse  panel-collapse" id="panelbody">
      <ul class="sub-subitem">
        <li>
          <a href="#">
                 Auth
                </a></li>
        <li>
          <a href="#">
                 Auth with claim
                </a></li>
        <li>
          <a href="#">
                 Auth with other claim
                </a>
        </li>
      </ul>
    </div>
    <div class="panel-heading submenudropdown">
      <a href="#panelbody" data-toggle="collapse" data-parent="#accordion">
        <div class="panel-title arrow">
          <span class="glyphicon glyphicon-menu-down">
           </span>
        </div>
      </a>
    </div>
  </div>
  <span class="glyphicon glyphicon-home">
  </span><br />
  <h2>SAP</h2>
</div>

enter image description here

【问题讨论】：

发布你的代码，你也尝试过什么？
请制作更清晰的图像或小提琴并在文本中留出空间，并至少在发布之前阅读您的问题...“在此处输入图像描述”证明您甚至没有尝试过去做
你还需要这方面的建议吗？
到目前为止，我通过不固定大小以其他方式管理它，但如果您想对此有所启发，那将是一个很大的帮助。

标签： javascript jquery html css

【解决方案1】：

你总是可以像height: inherit;一样将面板的高度设置为继承

这使您的面板继承其父级的高度，即具有 menuboxcontent 类的 div。您的面板将具有 100% 的高度，因为您将其父级高度设置为 100%

【讨论】：

感谢您的回复。我试过了，它最初设置的高度等于它的父 div 以及当我关闭我不想要的面板时。只有当我打开面板时，我才希望它的高度等于其父 div。