【发布时间】：2021-05-23 20:35:45
【问题描述】：
我试图让一个元素粘在父 div 的底部，即使它上面没有任何东西。 正如您在thesetwo 图片中看到的那样，我所说的元素是包含textarea 的div。 当文本区域上方的 div 中有足够的消息时，它会很好地粘在页面底部，但是当没有那么多元素时，它不会，即使我设置了底部：0px;.
这是部分代码：
* {
padding: 0px;
margin: 0px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 0.8fr 4fr 15fr;
grid-template-rows: 50px calc(100vh - 65px);
overflow-y: hidden;
}
.navbar {
grid-column: 1/4;
background: #223;
}
.main-panel {
display: none;
grid-row: 2/3;
background: #223;
}
.buttons {
grid-column: 1/2;
grid-row: 2/3;
background: #456;
}
.screen {
grid-column: 3/4;
grid-row: 2/3;
background: #223;
}
.left-panel {
grid-column: 2/3;
grid-row: 2/3;
background: #243;
}
/*css for the chat box*/
.messages {
padding: 5px;
padding-right: 35px;
}
.message {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.sender {
font-size: 0.8em;
}
.message-mine {
border: 2px solid #dedede;
background-color: #321;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.my-messages {
padding: 5px;
padding-left: 35px;
}
.chat-box {
height: 100%;
overflow-y: scroll;
}
.chat-sending-area {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 4fr 1fr;
border: 5px solid black;
background: gray;
position: sticky;
margin-bottom: 0px;
bottom: 0px;
z-index: 1000;
width: calc(100% - 10px);
height: 6%;
}
.chat-history {
}
.text-area {
grid-row:1/2;
grid-column: 1/2;
width: 95%;
height: calc(100% - 3px);
resize: none;
}
.send-button {
grid-row:1/2;
grid-column: 2/3;
}
.send-message-button {
width: 85%;
height: calc(100% - 6px);
border: 3px outset pink;
background: green;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
STUFF HERE.
</div>
<div class="main-panel">
STUFF HERE.
</div>
<div class="buttons">
STUFF HERE.
</div>
<div class="screen">
STUFF HERE.
</div>
<div class="left-panel">
<div class="chat-box">
<div class="chat-history">
<div class="my-messages">
<div class="message-mine" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<div class="my-messages">
<div class="message-mine" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<div class="messages">
<!-- -->
<div class="message" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<div class="messages">
<!-- -->
<div class="message" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
</div>
<div class="chat-sending-area">
<div class="send-button">
<img class="send-message-button" src="chat-dots.svg">
</div>
<div class="text-box">
<textarea class="text-area">Write your message here...</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>无论如何，我都希望 (chat-sending-area) div 贴在 (chat-box) div 的底部。
任何帮助将不胜感激。
【问题讨论】：