防止页眉和页脚 div 与主 div 重叠

Question

我是编码新手，昨晚我决定尝试学习 HTML 和 CSS。我正在开发一个聊天用户界面。但我的页眉和页脚 div 与聊天 div 重叠时遇到问题。

我尝试修复的消息输入也有问题 输入到聊天 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>

如果我能得到任何建议或帮助，我将不胜感激。

Answer 1

只需从页眉和页脚的类中删除 position: fixed！

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