可折叠 IFrame 长度规范答案

【问题标题】：Collapsible IFrame Length Specification可折叠 IFrame 长度规范
【发布时间】：2017-09-20 14:15:15
【问题描述】：

我正在尝试在我有一个带有 IFrame 的手风琴的地方制作一些东西，当他们点击时它会展开。当他们点击它时，它会扩大但只有一点点。我怎样才能让它扩大更多。这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style> 
#max200 {
    height: 85%;
  overflow-y: scroll;
}
  </style>
</head>
<body>

<div class="container">
  <h2>Minilesson Directory</h2>
  <div class="panel-group" id="accordion">
    <form id="max200">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Creating A Project - Minilesson #1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">
        <iframe src="https://docs.google.com/document/d/1K8YYw32TdEN9qd_tkypKQXDxwMh8uM3iAnUi5BcQ6jU/pub?embedded=true" height="85%" width="100%"></iframe></div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>
  </form>

</body>
</html>

结果如下： http://getthunkin.sanderjochems.nl/github/minilessons.php

谢谢！

【问题讨论】：

标签： php html iframe

【解决方案1】：

使用 Bootstrap Accordion，如果 IFrame 可以设置高度，它会自动改变

https://www.w3schools.com/bootstrap/bootstrap_collapse.asp#accordion

【讨论】：