Question

我已经为chatbot应用程序设计了布局，基本上有三个固定的div，分别是Top div，Bottom div和Center div（用于聊天的内容）。固定布局的主要目的是，当内容超出或每当我缩放窗口时，由于固定布局，并非所有内容都可以正确滚动。在这里，我将附上屏幕截图和固定布局的代码

.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>

我希望每当我执行缩放窗口时都将显示滚动条，不应剪切我的消息内容。预先感谢

如何修复，滚动内容的固定布局

0 个答案: