Set div height in % doesn't work

Question

Objectiv : A little icon, bottom-right corner, when clicked, expand in a nice chat-windows !

Solution : I've defined a chat.html which I'm loading into an iFrame. Actually it works, I've got my header and my footer (Title & text input) that are fixed and always displayed, and my message div which is scrollable.

Problem : BUT actually everything is hardcoded. I mean, my iFrame height is hardcoded and that is not a problem, but, inside my chat.html, I've got to hardcode all my div's height, or it won't works as it's supposed. For example, my message div is actually

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

If I want to write this in % like :

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

It will still works, but my footer div will not be displayed, because my whole iFrame will be scrolable, and if I put "scrollable = no" in my iFrame, well, my footer is not displayed and not accessible.

Here is my 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>

And my 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>

If you can help me, I think everything is nicer when in %, it's more "responsive" and adaptative !

instead of `heighy:60%` use `flex:1` – Temani Afif Jun 04 '18 at 14:00 — Temani Afif, Jun 04 '18 at 14:00
Doesn't work mate :( Doesn't change anything ! – bcauchard Jun 04 '18 at 14:43 — bcauchard, Jun 04 '18 at 14:43
in the chat.html do you have `body,html{height:100%}` ? – Temani Afif Jun 04 '18 at 14:57 — Temani Afif, Jun 04 '18 at 14:57
Added it, still nothing ! :/ – bcauchard Jun 05 '18 at 07:14 — bcauchard, Jun 05 '18 at 07:14
Had syntax error, working fine now ! Thank you ! – bcauchard Jun 05 '18 at 08:58 — bcauchard, Jun 05 '18 at 08:58

Set div height in % doesn't work

0 Answers0