Início / user-29622401

XCZ_Mike's questions

Martin Hope
XCZ_Mike
Asked: 2025-02-14 00:43:19 +0800 CST
  • 6

Estou tentando criar um aplicativo de bate-papo e, ao pressionar um botão, você pode ver os registros de data e hora das mensagens.

Meu timestamp sempre ocupa 200px de tamanho e o outro ocupa o restante.

Vamos chamar div1 para o registro de data e hora (200px) e div2 para as mensagens (ocupa o resto do espaço).

Tentei usar o translate no primeiro div1 e movê-lo e rapidamente percebi que o div2 não seria redimensionado automaticamente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .chat-container {
            display: flex;
            height: 50vh;
            width: 50vw;
            background-color: #f0f0f0;
        }
        #div1 {
            background-color: #0004ff;
            height: 100%;
            width: 200px;
            text-align: center;
            
            position: relative;
            left:-200px;
            transition: left 1s;
        }
        #div2 {
            background-color: #ff0000;
            height: 100%;
            text-align: center;
            width: calc(100% - 200px); /* 100% - 200px or auto would work*/
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="div1">
            <p>div1</p>
        </div>
        <div id="div2">
            <p>div2</p>
        </div>
    </div>
    <button id="button">animation</button>
    <script>
        let actived = false;
        document.getElementById("button").addEventListener("click", function() {
            const div1 = document.getElementById("div1");
            const div2 = document.getElementById("div2");
            div1.style.left = actived ? "-200px" : "0px";
            actived = !actived;
        });
    </script>
</body>
</html>

Então tentei redimensionar o tamanho do div2, mas quando fiz isso, calc(100% - 200px)não ficou do mesmo tamanho!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .chat-container {
            display: flex;
            height: 50vh;
            width: 50vw;
            background-color: #f0f0f0;
            overflow: hidden;
        }
        #div1 {
            background-color: #0004ff;
            height: 100%;
            width: 200px;
            text-align: center;
            
            position: relative;
            left:-200px;
            transition: left 1s;
        }
        #div2 {
            background-color: #ff0000;
            height: 100%;
            text-align: center;
            width: calc(100% - 200px); /* 100% - 200px or auto would work*/

            position: relative;
            transition: width 1s;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="div1">
            <p>div1</p>
        </div>
        <div id="div2">
            <p>div2</p>
        </div>
    </div>
    <button id="button">animation</button>
    <script>
        let actived = false;
        document.getElementById("button").addEventListener("click", function() {
            const div1 = document.getElementById("div1");
            const div2 = document.getElementById("div2");
            div1.style.left = actived ? "-200px" : "0px";
            div2.style.width = actived ? "100%" : "calc(100% - 200px)";
            actived = !actived;
        });
    </script>
</body>
</html>

Como pode 100%o pai menos o tamanho do div1 não ser o resto? Estou tão confuso.

Por favor, diga-me qual método devo usar e por que 100% - 200pxnão funciona.

javascript