如何让我的按钮停留在文本框的底部，每次我按下“添加”？

要让按钮停留在文本框的底部，并且每次按下“添加”时都能正确显示，你可以使用HTML和CSS来实现这个布局。以下是一个简单的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button at Bottom</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <textarea id="textInput" placeholder="Type something here..."></textarea>
        <button id="addButton">添加</button>
    </div>
</body>
</html>

CSS (styles.css)

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

textarea {
    flex: 1;
    padding: 10px;
    margin-bottom: 10px;
}

button {
    width: 100%;
    padding: 10px;
}

解释

HTML结构：
- container 是一个包含文本框和按钮的容器。
- textarea 是用户输入文本的区域。
- button 是“添加”按钮。

CSS样式：
- body, html 设置高度为100%，确保整个页面高度被利用。
- .container 使用 display: flex 和 flex-direction: column 来创建一个垂直布局。
- textarea 使用 flex: 1 来占据剩余的空间，使其在容器中垂直居中。
- button 设置宽度为100%，并添加一些内边距，使其看起来更美观。