height 相关问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chat&Book</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="lang"> <select class="srclang"> <option value="en">English</option> <option value="ta">Tamil</option> <option value="hi">Hindi</option> </select> <select class="trglang"> <option value="hi">Hindi</option> <option value="en">English</option> <option value="ta">Tamil</option> </select> </div> <div class="msgarea"></div> <div class="typebar"> <input type="text" name="message" placeholder="Message.." class="msgbox" required> <button class="sendbtn">Send</button> </div> <script src="/chat.js"></script> </body> </html> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { width: 100vw; height: 100vh; background-color: #E9EFEC; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px; font-family: 'Nunito Sans', sans-serif; } .msgarea { width: 100%; height: 85vh; border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; /* Align messages from the top */ gap: 10px; background-color: white; padding: 10px; overflow-y: auto; /* Enable scrolling */ } .msgarea p { max-width: 80%; display: block; /* Change this */ min-height: 40px; /* Keep this */ background-color: #478CCF; padding: 10px; border-radius: 10px; color: white; margin-bottom: 10px; margin-top: 10px; word-wrap: break-word; box-sizing: border-box; overflow-wrap: break-word; /* Ensure long words wrap */ } .lang { position: fixed; top: 20px; left: 20px; } .typebar { width: 100vw; height: 10vh; background-color: #E9EFEC; display: flex; justify-content: flex-start; align-items: center; gap: 5%; position: fixed; bottom: 0; } .msgbox { width: 80%; height: 80%; margin-left: 20px; border-radius: 25px; border: 1px solid black; background: white; padding-left: 15px; box-sizing: border-box; font-family: 'Nunito Sans', sans-serif; position: relative; font-size: 16px; } .sendbtn { border: 1px solid black; background-color: #478CCF; color: white; width: 10%; height: 80%; border-radius: 25px; margin-right: 20px; cursor: pointer; font-size: 16px; } @media (max-width:700px) { .msgarea { height: 80vh; border: 2px solid #478CCF; } .msgarea p{ min-height: 40px; margin-top: 20px; } .msgbox { width: 70%; height: 70%; } .sendbtn { width: 30%; height: 70%; } } 这里我将“msgarea p”的高度设置为最小值 40px。如果“msgarea”内的消息很少，则效果很好。我还向“msgarea”添加了溢出属性，以确保一旦消息超出，它就可以滚动。它也工作得很好。但问题在于“msgarea p”高度，尤其是当消息超出并且变得可滚动时。一旦“msgarea”变得可滚动，min-height 属性就会出现错误，“p”标签中的文本就会溢出背景颜色。这就是我面临的问题。我尝试将 p 标签的高度更改为自动，但没有任何反应。尝试删除最小高度，以便文本可以覆盖整个背景颜色并且不会溢出

html css overflow height

回答 1 投票 0

如何获取等高列表项的网格？

我正在尝试使用列表项和内联块来制作产品网格。问题在于块的内容具有不同的高度，并且内联块不能保持高度相等。该公司...

css grid css-grid height

回答 5 投票 0

如何使用bootstrap消除额外的html正文高度

我正在使用引导程序，并在我的身体末端得到大量的“空白”。 Bootstrap 似乎是手动设置我的 html 正文的高度，我无法覆盖它。有没有人...

html twitter-bootstrap height whitespace extra

回答 2 投票 0

Stack 中的多个视图，并且它们在 SwiftUI 中调整大小

我有VStack，它里面有多个视图并且高度可变。这个VStack被放置在UITableView内部。我需要计算 VStack 的高度，因为它调整大小并给出 fl...