防止 header 和页脚 div 与主 div 重叠
[英]Prevent header and footer divs from overlapping main div
问题描述
I'm new to coding and i decided to try and learn html and css last night.
我是编码新手，昨晚我决定尝试学习 html 和 css。 I'm working on a chat UI.我正在开发一个聊天用户界面。 But i'm having a problem with my header and footer div overlapping the chat div.但我的 header 和页脚 div 与聊天 div 重叠时遇到问题。
I'm also having a problem with the message input i'm trying to fix the input to bottom of chat div but everything i tried didn't work.我的消息输入也有问题，我正在尝试将输入修复到聊天 div 的底部，但我尝试的一切都不起作用。
// This is just to append dummy messages. $(document).ready(function() { setTimeout(() => { for (let i = 0; i < 10; i++) { let date = new Date(); let hours = date.getHours(); let minutes = date.getMinutes(); let message_content = ` <div class="chat_message"> <div class="chat_person_name"><p>Dummy User</p></div> <div class="chat_message_content"><p>Dummy Message</p></div> <div class="chat_time_stamp"><p>${hours}: ${minutes}</p></div> </div>`; $(".message_area").append(message_content); $(".chat_messages").animate({ scrollTop: $(".chat_messages").prop("scrollHeight") }, 1000); } }, 5000); });
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { line-height: 1.4; color: #333333; font-family: Helvetica, Arial, sans-serif; }.chat { display: flex; }.chat_header { width: 100%; padding: 20px; position: fixed; display: flex; background: #8064A2; background: -webkit-linear-gradient(to right, #8064A2, #000000); background: linear-gradient(to right, #8064A2, #000000); color: #FFFFFF; }.chat_sidebar { height: 100vh; color: #FFFFFF; background-color: #2A2A2A; overflow-y: scroll; display: block; }.chat_main { flex-grow: 1; display: flex; background-color: #2A2A2A; flex-direction: column; max-height: 100vh; }.message_area { margin-bottom: 16px; }.chat_messages { flex-grow: 1; padding: 24px 24px 0; overflow-y: scroll; }.chat_message { width: 50%; background-color: #212121; padding: 10px 10px 0; color: #B9B9B9; animation-name: msg-ani; animation-duration: 0.5s; border-radius: 0 10px 10px 10px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; }.chat_person_name { font-weight: bold; color: #FFFFFF; }.chat_time_stamp { text-align: right; color: #FFFFFF; font-weight: 500; }.compose { display: flex; flex-shrink: 0; margin-top: 16px; padding: 2px; }.compose form { display: flex; flex-grow: 1; margin-right: 1px; }.compose input { border: 1px solid #EEEEEE; border-radius: 100px; width: 100%; padding: 12px; margin: 0 16px 0 0; flex-grow: 1; font-size: 14px; outline: none; }.compose button { cursor: pointer; padding: 12px; background: #8064A2; background: -webkit-linear-gradient(to right, #8064A2, #000000); background: linear-gradient(to right, #8064A2, #000000); border: none; color: #F3F3F3; font-size: 16px; transition: background 0.3s ease; border-radius: 100px; }.compose button:hover { background: #8064A2; background: -webkit-linear-gradient(to right, #000000, #8064A2); background: linear-gradient(to right, #000000, #8064A2); }.list-title { font-weight: 500; font-size: 18px; margin-bottom: 4px; padding: 12px 24px 0; text-align: center; }.user_item { display: flex; padding: 0; margin: 0; height: 44px; align-items: center; cursor: pointer; clear: both; position: relative; font-weight: 500; font-size: 0.9em; border-bottom: 1px solid #F3F3F3; }.user_label { color: #F3F3F3; font-weight: 700;important: vertical-align; middle: white-space; nowrap: overflow; hidden: text-overflow; ellipsis: line-height; 32px: display; inline-block: font-size; 14px:important; margin-left: -26px; cursor: default; position: absolute; left: 75px; max-width. 170px: };chat_footer { width: 100%; padding: 20px; position: fixed; bottom: 0; display: flex; background: #8064A2, background, -webkit-linear-gradient(to right; #8064A2: #000000), background, linear-gradient(to right; #8064A2: #000000); color: #ffffff; }
<html> <head> <title>My Application</title> <meta name="viewport" content="width=device-width, initial=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="chat_header" style="display: block;"> <p>Logo Here</p> </div> <div class="chat"> <div id="side_bar" class="chat_sidebar"> <ul class="chat_nav" style="display: flex; flex-direction: row; justify-content: space-evenly;"> <li class=""> <a href="#users_container" data-role="users" data-toggle="tab"> <i class="fa fa-users"></i> <span>Users</span><span class="users_online"></span> </a> </li> <li class=""> <a href="#rooms_container" data-role="rooms" data-toggle="tab"> <i class="fa fa-list"></i> <span>Rooms</span><span class="rooms_online"></span> </a> </li> </ul> <h3 class="list-title">Users Online</h3> <hr> <div class="user_item" style="color:#000000"> <div class="user_label"> <span class="user_label_span">Username one</span> </div> </div> <div class="user_item" style="color:#000000"> <div class="user_label"> <span class="user_label_span">Username two</span> </div> </div> <div class="user_item" style="color:#000000"> <div class="user_label"> <span class="user_label_span">Username three</span> </div> </div> </div> <div class="chat_main"> <div id="messages" class="chat_messages"> <div class="message_area"> </div> <div class="compose flex-property "> <form id="message-form"> <input name="message" type="text" placeholder="message" required autocomplete="off" class="message_input_field"> <button id="send_button">SEND</button> </form> </div> </div> </div> </div> <div class="chat_footer" style="display: block;"> <p>Footer Info Here</p> </div> <script src="script.js"></script> </body> </html>
I would appreciate any advice or help i could get.如果我能得到任何建议或帮助，我将不胜感激。
1 个解决方案
解决方案1
0 2022-01-05 11:47:27
Just remove position: fixed from both the classes for header and footer!只需删除position: fixed从 header 和页脚的两个类中修复！
// This is just to append dummy messages. $(document).ready(function() { setTimeout(() => { for (let i = 0; i < 10; i++) { let date = new Date(); let hours = date.getHours(); let minutes = date.getMinutes(); let message_content = ` <div class="chat_message"> <div class="chat_person_name"><p>Dummy User</p></div> <div class="chat_message_content"><p>Dummy Message</p></div> <div class="chat_time_stamp"><p>${hours}: ${minutes}</p></div> </div>`; $(".message_area").append(message_content); $(".chat_messages").animate({ scrollTop: $(".chat_messages").prop("scrollHeight") }, 1000); } }, 5000); });
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { line-height: 1.4; color: #333333; font-family: Helvetica, Arial, sans-serif; }.chat { display: flex; }.chat_header { width: 100%; padding: 20px; display: flex; background: #8064A2; background: -webkit-linear-gradient(to right, #8064A2, #000000); background: linear-gradient(to right, #8064A2, #000000); color: #FFFFFF; }.chat_sidebar { height: 100vh; color: #FFFFFF; background-color: #2A2A2A; overflow-y: scroll; display: block; }.chat_main { flex-grow: 1; display: flex; background-color: #2A2A2A; flex-direction: column; max-height: 100vh; }.message_area { margin-bottom: 16px; }.chat_messages { flex-grow: 1; padding: 24px 24px 0; overflow-y: scroll; }.chat_message { width: 50%; background-color: #212121; padding: 10px 10px 0; color: #B9B9B9; animation-name: msg-ani; animation-duration: 0.5s; border-radius: 0 10px 10px 10px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; }.chat_person_name { font-weight: bold; color: #FFFFFF; }.chat_time_stamp { text-align: right; color: #FFFFFF; font-weight: 500; }.compose { display: flex; flex-shrink: 0; margin-top: 16px; padding: 2px; }.compose form { display: flex; flex-grow: 1; margin-right: 1px; }.compose input { border: 1px solid #EEEEEE; border-radius: 100px; width: 100%; padding: 12px; margin: 0 16px 0 0; flex-grow: 1; font-size: 14px; outline: none; }.compose button { cursor: pointer; padding: 12px; background: #8064A2; background: -webkit-linear-gradient(to right, #8064A2, #000000); background: linear-gradient(to right, #8064A2, #000000); border: none; color: #F3F3F3; font-size: 16px; transition: background 0.3s ease; border-radius: 100px; }.compose button:hover { background: #8064A2; background: -webkit-linear-gradient(to right, #000000, #8064A2); background: linear-gradient(to right, #000000, #8064A2); }.list-title { font-weight: 500; font-size: 18px; margin-bottom: 4px; padding: 12px 24px 0; text-align: center; }.user_item { display: flex; padding: 0; margin: 0; height: 44px; align-items: center; cursor: pointer; clear: both; position: relative; font-weight: 500; font-size: 0.9em; border-bottom: 1px solid #F3F3F3; }.user_label { color: #F3F3F3; font-weight: 700;important: vertical-align; middle: white-space; nowrap: overflow; hidden: text-overflow; ellipsis: line-height; 32px: display; inline-block: font-size; 14px:important; margin-left: -26px; cursor: default; position: absolute; left: 75px; max-width. 170px: };chat_footer { width: 100%; padding: 20px; bottom: 0; display: flex; background: #8064A2, background, -webkit-linear-gradient(to right; #8064A2: #000000), background, linear-gradient(to right; #8064A2: #000000); color: #ffffff; }
<html> <head> <title>My Application</title> <meta name="viewport" content="width=device-width, initial=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="chat_header" style="display: block;"> <p>Logo Here</p> </div> <div class="chat"> <div id="side_bar" class="chat_sidebar"> <ul class="chat_nav" style="display: flex; flex-direction: row; justify-content: space-evenly;"> <li class=""> <a href="#users_container" data-role="users" data-toggle="tab"> <i class="fa fa-users"></i> <span>Users</span><span class="users_online"></span> </a> </li> <li class=""> <a href="#rooms_container" data-role="rooms" data-toggle="tab"> <i class="fa fa-list"></i> <span>Rooms</span><span class="rooms_online"></span> </a> </li> </ul> <h3 class="list-title">Users Online</h3> <hr> <div class="user_item" style="color:#000000"> <div class="user_label"> <span class="user_label_span">Username one</span> </div> </div> <div class="user_item" style="color:#000000"> <div class="user_label"> <span class="user_label_span">Username two</span> </div> </div> <div class="user_item" style="color:#000000"> <div class="user_label"> <span class="user_label_span">Username three</span> </div> </div> </div> <div class="chat_main"> <div id="messages" class="chat_messages"> <div class="message_area"> </div> <div class="compose flex-property "> <form id="message-form"> <input name="message" type="text" placeholder="message" required autocomplete="off" class="message_input_field"> <button id="send_button">SEND</button> </form> </div> </div> </div> </div> <div class="chat_footer" style="display: block;"> <p>Footer Info Here</p> </div> <script src="script.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
防止 div 与其他 div 重叠 - prevent div from overlapping other divs
如何防止我的固定 div 与其他 div 重叠 - How can I prevent my fixed div from overlapping my other divs
停止从重叠的页脚滚动div - stop scrolling div from overlapping footer
粘性页脚Div重叠 - Sticky Footer Div Overlapping
如何防止固定按钮重叠页脚区域并停止页脚所在位置顶部的按钮 - How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located
防止div重叠 - Preventing divs from overlapping
在页脚处停止固定的侧边栏-防止重叠 - Stop fixed sidebar at footer - prevent overlapping
如何防止一个div在调整大小时与另一个重叠？ - How can I prevent one div from overlapping another on resize?
Jquery Resizable：防止在调整大小时重叠 div - Jquery Resizable: Prevent overlapping divs on Resize
引导容器div中的div重叠-CSS - Overlapping divs inside a bootstrap container div - CSS
相关标签