html - 元素的垂直响应

Question

我有以下元素，点击它会显示它的附加内容...问题是当标题中有很多文本时，元素应该垂直扩展，但事实并非如此。

谢谢

How it looks like now

我的 html 代码:

  <div class="faq-default-content faq-content">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse13" class="collapsed">This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test </a>
          </h4>
        </div>
        <div id="collapse13" class="panel-collapse collapse" role="tabpanel">
          <div class="panel-body">
            <div class="panel_body_up">
              <p>additional text and content</p><a href="#" target="_blank"><button style="margin-right:15px;" type="submit" class="btn theme-btn" data-loading-text="Please wait...">Take a look</button></a>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse13" class="collapsed">This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test </a>
          </h4>
        </div>
      <div id="collapse13" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
          <div class="panel_body_up">
            <p>additional text and content</p><a href="#" target="_blank"><button style="margin-right:15px;" type="submit" class="btn theme-btn" data-loading-text="Please wait...">Take a look</button></a>
          </div>
        </div>
      </div>
    </div>
  </div>

我的CSS:

.faq-default-content.faq-content {
  margin-top: -10px;
}
.faq-content .panel-group .panel {
  border-radius: 0;
  margin-top: 10px;
}
.faq-content .panel-group .panel {
  background: #fff none repeat scroll 0 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 10px;
}
.faq-content .panel-group .panel.panel-default {
  border: medium none;
}
.faq-content .panel-group .panel.panel-default .panel-heading {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #e6e8ed;
  height: 47px;
  padding: 15px 0;

}
.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a {
  color: #333;
  display: block;
  font-family: 'PT Sans', sans-serif;
  font-size: 14px;
  padding-left: 65px;
  line-height: 1.6;
  position: relative;
}
.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a::after {
  color: #fff;
  content: "\f056";
  font-family: "FontAwesome";
  font-size: 20px;
  height: 47px;
  left: -1px;
  padding: 9px 15px;
  position: absolute;
  top: -16px;
  width: 47px;
  background: #276398;
}
.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a.collapsed:after {
  border: 1px solid #e6e8ed;
  border-right: 0;
  color: #276398;
  content: "\f055";
  font-family: "FontAwesome";
  font-size: 20px;
  height: 47px;
  left: -1px;
  padding: 9px 15px;
  position: absolute;
  top: -16px;
  width: 47px;
  background: #FFF;
}


.faq-content .panel-group .panel.panel-default .panel-collapse .panel-body {
  border-top-color: #fff;
  padding-bottom: 14px;
  padding-top: 17px;
}
.faq-content .panel-group .panel.panel-default .panel-collapse .panel-body .panel_body_up p {
  color: #8b8b8b;
  font-size: 15px;
  font-weight: 400;
  line-height: 28px;
  font-family: 'PT Sans', sans-serif;
  font-style: italic;
}

Answer 1

从 .panel-heading 中移除静态高度

.faq-default-content.faq-content {
  margin-top: -10px;
}

.faq-content .panel-group .panel {
  border-radius: 0;
  margin-top: 10px;
}

.faq-content .panel-group .panel {
  background: #fff none repeat scroll 0 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 10px;
}

.faq-content .panel-group .panel.panel-default {
  border: medium none;
}

.faq-content .panel-group .panel.panel-default .panel-heading {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #e6e8ed;

  padding: 15px 0;
}

.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a {
  color: #333;

  font-family: 'PT Sans', sans-serif;
  font-size: 14px;
  padding-left: 65px;
  line-height: 1.6;
  position: relative;
}

.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a::after {
  color: #fff;
  content: "\f056";
  font-family: "FontAwesome";
  font-size: 20px;
  height: 47px;
  left: -1px;
  padding: 9px 15px;
  position: absolute;
  top: -16px;
  width: 47px;
  background: #276398;
}

.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a.collapsed:after {
  border: 1px solid #e6e8ed;
  border-right: 0;
  color: #276398;
  content: "\f055";
  font-family: "FontAwesome";
  font-size: 20px;
  height: 47px;
  left: -1px;
  padding: 9px 15px;
  position: absolute;
  top: -16px;
  width: 47px;
  background: #FFF;
}

.faq-content .panel-group .panel.panel-default .panel-collapse .panel-body {
  border-top-color: #fff;
  padding-bottom: 14px;
  padding-top: 17px;
}

.faq-content .panel-group .panel.panel-default .panel-collapse .panel-body .panel_body_up p {
  color: #8b8b8b;
  font-size: 15px;
  font-weight: 400;
  line-height: 28px;
  font-family: 'PT Sans', sans-serif;
  font-style: italic;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="faq-default-content faq-content">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse13" class="collapsed">This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test </a>
        </h4>
      </div>
      <div id="collapse13" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
          <div class="panel_body_up">
            <p>additional text and content</p><a href="#" target="_blank"><button style="margin-right:15px;" type="submit" class="btn theme-btn" data-loading-text="Please wait...">Take a look</button></a></div>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse13" class="collapsed">This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test </a>
        </h4>
      </div>
      <div id="collapse13" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
          <div class="panel_body_up">
            <p>additional text and content</p><a href="#" target="_blank"><button style="margin-right:15px;" type="submit" class="btn theme-btn" data-loading-text="Please wait...">Take a look</button></a></div>
        </div>
      </div>
    </div>
  </div>