css 我如何使一个div得到一个滚动条而不是整个页面？

bogh5gae 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(140)

我正在尝试为移动的聊天应用程序，但我有一个问题：每当文本区域的div被文本填满而不是得到一个内部滚动条时，整个页面开始变大，将文本输入框推到页面底部。我想如果文本区域内有一个滚动条，当它变得太大，而不是整个网页得到一个。我该怎么做？

.text-area {
  overflow-y: scroll;
  flex-grow: 1;
}

.typing-area {
  width: 95%;
  display: flex;
  flex-direction: row-reverse;
}

.messagebox {
  flex-grow: 1;
}

.mega {
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
}

<!DOCTYPE html>
<html>

<head>
  <title>chat</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="mega">
    <div class="text-area">
      <pre>LOADING!
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    </pre>
    </div>
    <form>
      <div class="typing-area">
        <input type="submit"><input type="text" class="messagebox">
      </div>
    </form>
  </div>
</body>

</html>

css

来源：https://stackoverflow.com/questions/76133645/how-do-i-make-a-div-get-a-scroll-bar-instead-of-the-whole-page

1条答案

按热度按时间

u5rb5r591#

只要在.text-area上抛出一个height，现在高度是固定的，导致溢出：

.text-area{
      height:200px;
      overflow-y:scroll;
      flex-grow: 1;
    }

片段：

.text-area{
  height:200px;
  overflow-y:scroll;
  flex-grow: 1;
}

.typing-area{
  width:95%;
  display: flex;
  flex-direction: row-reverse;
}
.messagebox{
  flex-grow: 1;
}
.mega{
flex-direction: column;
height:100vh;
max-height:100vh;
}

<!doctype html>
<html>
  <head>
    <title>chat</title>
    <meta name="viewport" content="width=device-width, height=device- 
height, initial-scale=1.0">
      <link rel="stylesheet" href="styles.css">

  </head>
  <body>
    <div class="mega">
    <div class="text-area">
    <pre>LOADING!
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    helllo
    <pre>
    </div>
     <form>
    <div class="typing-area">
    <form>
    <input type="submit"><input type="text" class="messagebox">
    </div>
    </form>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-05-02

我来回答

css 我如何使一个div得到一个滚动条而不是整个页面？

1条答案

相关问题

热门标签

最新问答