I have designed layout for chatbot application, I have basically three fixed divs, Top div, Bottom div and Center div (For the content of the chat). The main with my fixed layout is that when the content exceeds or whenever I do zoom my window, Not all content is properly scrollable because of the fixed layout. Here I am attaching screenshot and code for fixed layout

Here's the screenshot

.headerfixed{   
    border-bottom: 1px solid #c4c4c4;
    max-width:900px;
    left: 50%;
    transform: translate(-50%, 0);
    right:0px;  
    top:0px;   
    width:100%;       
    position: fixed;
    clip: rect(0, auto, auto, 0);

}
.containerfixed{
    position: fixed;
    width:100%;                  
    max-width:900px;    

}
.msg_historyfixed {

    max-width:900px;
    left: 50%;
    transform: translate(-50%, 0);
    right:0px;  
    top:78px;          
    width:100%;   
    position: fixed; 
    height: 500px;  
    overflow-y: auto;
}
.bootmInputfixed {
    max-width:900px;
    border-top: 1px solid #c4c4c4;  
    left: 50%;
    transform: translate(-50%, 0);
    right:0px;  
    bottom:0px;   
    width:100%;
    z-index:99;
    background:#fff;       
    position: fixed;

}

index.html

<!DOCTYPE html>
<html lang="en" class="gr__localhost"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="stylesheet" href="./font-awesome.min.css">
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./jquery.min.js"></script>
<script src="./bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css">

</head>
<body >
    <div class="containerfixed" id="windowContainer">
        <div class="messaging">
            <div class="headerfixed" id="windowHeader">
                <div class="header-title">                  
                    <a href="http://localhost:9090/BASE/Lookup?action=content/5"><h4>Back to the original content</h4></a>
                    <button id="clearChat" class="clear_btn" type="button">
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
            <div class="mesgs">         
            <div class="msg_historyfixed" id="msgHistory">
                <!-- Lots of content -->
                </div>
                <div class="type_msgfixed" id="msgInputArea" style="">
                    <div class="input_msg_write">
                        <form id="msgSendForm">
                            <input type="text" id="message" name="message" class="write_msg" placeholder="Type a message here">
                            <button id="chatSend" class="msg_send_btn" type="submit" placeholder="Type a message here">
                                <i class="fa fa-paper-plane" aria-hidden="true"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

     <!-- Modal HTML -->
    <div id="confirmAnswerModal" class="modal fade" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>do you want to go back to original content?</p>                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                    <a href="http://localhost:9090/BASE/Lookup?action=content/5" id="confirm_link" class="btn btn-success">Yes</a>
                </div>
            </div>
        </div>
    </div>

    <div id="scriptsAnswerForms">
    <script>$("#updateDocForm").submit(function(e){e.preventDefault();if($("#fileNameUpdateDoc").val()){updateDocument($("#fileNameUpdateDoc").val(),"#updateDocForm");}});</script><script>$("#formAnswer1").hide();$("#uplink1").click(function(){$("#formAnswer1").toggle();});$("#formAnswer1").submit(function(e){e.preventDefault();if($("#title1").val(),$("#body1").val()){updateAnswer($("#title1").val(),$("#body1").val(),"#formAnswer1");}});$("#confirmAnswer1").click(function(){confirmAnswer("java","  On the Properties you will find two options: Java Build Path and Java Compiler. Make sure that both point to the same Java version. And this is the illustration on how you run your first source with Run As - Java Application. Assignments  ")})</script></div>
    <div id="scriptsAutoScroll">

    </div>
 <script src="./Chat with ITU Assistant_files/chatbot.js.download"></script>

</body>
</html>

I expect the scrollbar should be displayed whenever I do zoom window, My content of the message should not be cut. Thanks in advance

0 Answers