iFrame扩展到一定的大小

Question

我正在使用iFrame来显示一些聊天内容。 所以我得到了一个base.html，它由所有其他HTML文件扩展，我的iframe_holder在这里定义。 我得到了一个chat.html，其中定义了我的聊天。 最后我得到了一个这样的按钮：

iframe_holder是包含我的iFrame的div（请参阅下面的代码）。

问题是，当点击按钮展开/折叠div时，它的高度太小，我的意思是，我认为它会调整到我指定的div高度和宽度，但我不会。在检查时，我看到高度属性刚刚消失，即使宽度与我指定的宽度相同。

你们知道为什么以及如何解决它？

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
}

div#chat {
  display: inline-flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

div#header {
  background-color: rgb(190, 190, 190);
  height: 5%;
  width: 100%;
  font-weight: bold;
  align-content: center;
  display: table;
}

#title {
  font-size: 4.5vw;
  color: green;
  display: table-cell;
  vertical-align: middle;
  padding-left: 8px;
}

#close {
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-top: 5px;
}

div#message_div {
  width: 100%;
  height: 95%;
  overflow-y: auto;
}

#messages {
  font-size: 3.7vw;
}

li {
  overflow-wrap: break-word;
}

div#footer {
  background-color: rgb(190, 190, 190);
  height: 5%;
  width: 100%;
}

#myMessage {
  width: 89%;
  height: 100%;
}

#sendbutton {
  float: right;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
}

＆＃13;

<button id="collapse_button" data-toggle="collapse" data-target="#iframe_holder"></button>

<!--base.html-->

<div id="chat-zone" style="z-index: 1;position: fixed; right: 2%; bottom: 2%;">
  <div id="notif_icon">
    <button id="notif_icon" style="position:absolute; margin-left: -20px; margin-top: -17px" class="btn btn-warning btn-circle btn-xl"><i class="glyphicon glyphicon-flag"></i></button>
  </div>
  <div id="chat_icon">
    <div id="iframe_holder" style="height: 35vw; width: 22vw;">
      <iframe class="collapsed" id="myframe" src="http://localhost:5000/chat" style="height: 100%; width: 100%;"></iframe>
    </div>
    <button id="chat_button" class="btn btn-lg btn-circle" onclick="button_click()"><i class="glyphicon glyphicon-send"></i></button>
  </div>
</div>

<!--chat.html-->

<div id="chat">
  <div id="header">
    <span id="title">Chat</span>
    <button id="close" class="btn btn-primary btn-success">
            <i id="icone" class="glyphicon glyphicon-remove"></i>
        </button>
  </div>

  <div id="message_div">
    <ul id="messages" class="list-group"></ul>
  </div>

  <div>
    <input type="text" id="myMessage" placeholder="Type a message">
    <button id="sendbutton" class="btn btn-success">
            <i id="icone" class="glyphicon glyphicon-send"></i> 
        </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;