Thiết kế website giá rẻ

Question

I am creating a chat web app for a project and when there is no messages displayed on chat window the inputarea and button appear on top,below header. After every message it get’s down till it reach bottom. I want it to be displayed on bottom even if there are no messages.I will provide html,java, and css,to see if anyone can help me?I don’t want to use margin-top on input-area because it creates empty space between messages when i have messages displayed. Thanks in advance!

Html

<!DOCTYPE html>
<html>
<head>
    <title>SecretChat</title>
    <link rel="stylesheet" href="wlcmpg.css"/>
</head>
<body>
<h1>SecretChat</h1>

<?php
session_start();
include('configuration.php');
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    error_log("Error: " . $conn->connect_error, 3, 'C:/wamp64/www/chatapp/errorlogs.txt');

}
if (!isset($_SESSION['username'])) {
    header("Location: loginform.php");
    exit();
}
$username = htmlspecialchars($_SESSION['username']);
$stmt = $conn->prepare("SELECT username FROM registers WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->bind_result($db_username);
$stmt->fetch();

$profile_data_retrieved = false;
if ($db_username) {
    $profile_data = ['username' => $db_username];
    $profile_data_retrieved = true;
} else {
    error_log("Error: " . $conn->connect_error, 3, 'C:/wamp64/www/chatapp/errorlogs.txt');
    echo "Error";
}
$stmt->close();
$conn->close();
?>

<?php
if ($profile_data_retrieved) {
    echo '<div class="usr">' . 'Welcome ' . htmlspecialchars($profile_data['username']) . '</div>';
}
echo'<a href="logout.php"><div class="lgout">logout</div></a>';
?>

<h3>Welcome to secretchat.</h3>
<p>This web app is a test for a project on my IT school to learn how to create chat systems using signal or PGP cryptography to create safe communication platforms.</p>
<div class="chat">
    <div class="chat-window" id="chat-window">
        <form action="send_message.php" method="post" id="chat-form" onsubmit="sendMessage(event)">
            <div class="chat_header" id="chatuser">Chat</div>
            <div class="chat_msg"></div>
            
            <input type="hidden" name="receiver" id="receiver" value="">
            
            <div class="input-area">
            <textarea placeholder="type your message" name="message"></textarea>
            <button type="submit" onclick="sendMessage()">Send</button>
            </div>
        </form>
    </div>
    <div class="users-list">
        <ul id="users-list"></ul>
    </div>
</div>

<?php
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
include('configuration.php');

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    error_log("Error: " . $conn->connect_error, 3, 'C:/wamp64/www/chatapp/errorlogs.txt');
    
}

$current_user = htmlspecialchars($_SESSION["username"]);
$stmt = $conn->prepare("SELECT username FROM registers WHERE username != ?");
$stmt->bind_param("s", $current_user);
$stmt->execute();
$stmt->bind_result($user);

while ($stmt->fetch()) {
    echo '<li onclick="openChatWindow('' . htmlspecialchars($user, ENT_QUOTES, 'UTF-8') . '')">' . htmlspecialchars($user, ENT_QUOTES, 'UTF-8') . '</li>';
}

$stmt->close();
$conn->close();
?>
<script>
function openChatWindow(username) {
    document.getElementById('chatuser').textContent = username;
    document.getElementById('receiver').value = username;
    document.getElementById('chat-window').style.display = 'block';
    loadMessages(username);
}

function loadMessages(receiver) {
    fetch(`load_messages.php?receiver=${encodeURIComponent(receiver)}`)
        .then(response => response.json())
        .then(messages => {
            const container = document.querySelector('#chat-window .chat_msg');
            container.innerHTML = messages.map(message => `
                <div class="message"/>
                    <div class="sender"/>${message.sender}
                    <div class="text">${message.message}
                    <div class="timestamp"/>${message.timestamp}
                                    

            `).join('');
            container.scrollTop = container.scrollHeight; 
        })
        .catch(error => console.error('Error fetching messages:', error));
}

function sendMessage(event) {
    event.preventDefault();
    const form = document.getElementById('chat-form');
    const formData = new FormData(form);
    fetch('send_message.php', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (response.ok) {
            form.reset();
            loadMessages(document.getElementById('receiver').value);
        } else {
            console.error('Error sending message');
        }
    })
    .catch(error => console.error('Error:', error));
}

window.onload = function() {
    loadUserList();
};


function loadUserList() {
    fetch('load_users.php')
        .then(response => response.json())
        .then(users => {
            const userList = document.getElementById('users-list');
            userList.innerHTML = users.map(user => `
                <li onclick="openChatWindow('${user.username}')">${user.username}</li>
            `).join('');
        })
        .catch(error => console.error('Error fetching users:', error));
}
</script>

<h2 class="crdts">Credits on BPPCDR</h2>

</body>
</html>

css

body {
            font-family: Arial, sans-serif;
            background-color: #F5FBEF;
            margin: 0;
            bottom: 0;
            
            height: 100vh;
        }
        h1{
           text-align: center;
           font-size: 30px;
           color: purple;
           margin-top: 50px;
        }
        h3{
           text-align: center;
           margin-top: 100px;
        }
        
        
        p{
          text-align: center;
          display: flex;
          margin-top: 30px;
          margin-left: 260px;
        }
        .usr{
              display: flex;
              
              margin-left: 1500px;
              margin-top: -50px;
        }
        
        .chat {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    margin-top: -80px;
    
   
    overflow: hidden;
   
}
        
        
        
          .chat-window {
            display: none; 
            flex-direction: column;
            background-color: #00FFFF;
            border: 1px solid grey;
            
            
            flex-shrink: 0;
            resize: none;
            margin-left: 730px;
            overflow: auto;
            margin-top: 150px;
            width: 200px;
            height: 300px;
            flex: 1;
            position: absolute;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            
    flex-direction: column;
        }
        .chat_header {
                     cursor: pointer;
                    position: sticky;
                     margin-left: 2px;
                     top: 0;
                     text-align: center;
                     max-height: 30%;
                     color: #F5D0A9;
                     background-color: #4C0B5F;
                     z-index: 1000;
                     
        }
        
          .chat_msg {
            flex: 1;
            height: calc(100% - 60px);
            margin-top: auto;
            padding: 10px;
            border: none;
            width: 100%;
            overflow-y: auto;
            margin-top: auto;
            
            
            box-sizing: border-box;
            width: 100%;
           
        }
        .input-area{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    
                    
                    
                    box-sizing: border-box;
        }
                     
        textarea{
        flex: 1;
    padding: 8px;
    margin: 5px;
    
    height: 40px;
    margin-left: -10px;
    max-height: 30px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 4px;
    resize: none; 
    
    
    }
        
            button{
                
                display: flex;
                height: 40px;
                align-self: flex-start;
                align-items: center;
    
    background-color: #00FFFF;
    border: none;
                
                
                cursor: pointer;
        }
        
    ul{
                 display: flex;
                 
                
                 margin-top: 190px;
                
                 padding: 10px;
                 
    }
    
    
    li{
       border: 1px solid #ccc;
       width: 100px;
       background-color: #4C0B5F;
       color: #F5D0A9;
       cursor: pointer;
    }
        
        
        .crdts{
               display: flex;
               margin-top: 10px;
               margin-left: 770px;
               font-size: 15px;
        }
        
        .lgout{
               display: flex;
              cursor: pointer;
              margin-left: 1600px;
        ````

Thiết kế website giá rẻ

Danh mục

On chat window when there is no messages,inputarea is on top below header,not in the bottom