Question

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

＆＃13;

.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;
}

＆＃13;

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');

})

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

enter image description here

Answer 1

您可以随时将面板的高度设置为继承，如height: inherit;

这会让你的面板继承它的父级的高度，这是带有menuboxcontent类的div。您的面板的高度为100％，因为您将其父级高度设置为100％

将孩子的高度设置为等于其父div

1 个答案: