2017-04-24 92 views
1

我试图做一些事情,我有一个与IFrame内部的手风琴家,当他们点击扩大。当他们点击它扩展但只有一点点。我怎样才能使它扩大更多。这里是我的代码:可折叠的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

谢谢!

回答

0

使用引导程序手风琴,那么你可以设置高度,如果IFRAME和它将会被自动更改

​​