Question

Objectiv：一个小图标，右下角，点击后，在一个漂亮的聊天窗口中展开！

解决方案：我已经定义了一个我正在加载到iFrame中的chat.html。实际上它工作，我有我的页眉和我的页脚（标题和文本输入）固定并始终显示，我的消息div可滚动。

问题：但实际上一切都是硬编码的。我的意思是，我的iFrame高度是硬编码的，这不是问题，但是，在我的chat.html中，我必须硬编码我所有div的高度，否则它将无法正常工作。例如，我的消息div实际上是

<div id = "message_div" style="overflow-y: scroll; height: 563px">
     <ul id="messages" class="list-group" ></ul>
</div>

如果我想在％中写这个：

<div id = "message_div" style="overflow-y: scroll; height: 60%">
     <ul id="messages" class="list-group" ></ul>
</div>

它仍然有效，但我的页脚div不会显示，因为我的整个iFrame都是可以扫描的，如果我在我的iFrame中放了“scrollable = no”，那么我的页脚就不会显示而且无法访问。 / p>

这是我的chat.html：

<div id="chat" style="display:flex; flex-direction: column; height:100%" >
<div id="header" style="height:40px; padding-bottom: 3px; padding-top: 3px" >
    <span style="font-family: Montserrat;"><b>Chat</b></span>
    <a href="#" class="btn btn-primary btn-success"><span class="glyphicon glyphicon-remove"></span> </a>
</div>

<div id = "message_div" style="overflow-y: scroll; height: 60%">
    <ul id="messages" class="list-group" ></ul>
</div>

<div style="width: inherit; padding-top: 5px">
        <input type="text" id="myMessage" placeholder="Type a message" style="width: 87%">
        <a id="sendbutton" href="#" class="btn btn-success"><span class="glyphicon glyphicon-send"></span> </a>
</div>

我的iFrame：

<div id="chat_icon" style="position: fixed; right: 0; bottom: 0; margin-bottom: 4%; margin-right: 4%";>
<div class="collapse" id="iframe_holder" >
  <iframe src="http://localhost:5000/chat" style="height: 650px; width: 430px;"></iframe>
</div>
<button class="btn btn-lg btn-circle" data-target="#iframe_holder" data-toggle="collapse"><i class="glyphicon glyphicon-send"></i></button>

如果你可以帮助我，我认为一切都更好，而在％，它更“响应”和适应性！

以％为单位设置div高度不起作用

0 个答案: