如何使元素垂直拉伸而不影响外观？

【问题标题】：How to make element stretch vertically and not affect look?如何使元素垂直拉伸而不影响外观？
【发布时间】：2021-04-10 03:00:20
【问题描述】：

我有一个看起来像这样的页面。

//$(document).ready(function() {

//   function viewport_height() {
//      var window_height = $(window).height();
//      $('#wrapper').height(window_height);
//      $('#chat-area').height = $(window_height);
      
//   }

//   viewport_height();

//   $(window).resize(function() {
//      viewport_height();
//  });

//});
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f7f7f7;
  padding: 0 10px;
}
.wrapper{
  background: #fff;
  max-width: 450px;
  width: 100%;
  border-radius: 16px;
  box-shadow:
  0 0 128px 0 rgba(0, 0, 0, 0.1),
              0 32px 64px -48px rgba(0, 0, 0, 0.5);
}

/* Login & Signup Form CSS Start */
.form{
  padding: 25px 30px;
}
.form header{
  font-size: 25px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}
.form form{
  margin: 20px 0;
}
.form form .error-text{
  color: #721c24;
  padding: 8px 10px;
  text-align: center;
  border-radius: 5px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  margin-bottom: 10px;
  display: none;
}
.form form .name-details{
  display: flex;
}
.form .name-details .field:first-child{
  margin-right: 10px;
}
.form .name-details .field:last-child{
  margin-left: 10px;
}
.form form .field{
  display: flex;
  margin-bottom: 10px;
  flex-direction: column;
  position: relative;
}
.form form .field label{
  margin-bottom: 2px;
}
.form form .input input{
  height: 40px;
  width: 100%;
  font-size: 16px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.form form .field input{
  outline: none;
}
.form form .image input{
  font-size: 17px;
}
.form form .button input{
  height: 45px;
  border: none;
  color: #fff;
  font-size: 17px;
  background: #333;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 13px;
}
.form form .field i{
  position: absolute;
  right: 15px;
  top: 70%;
  color: #ccc;
  cursor: pointer;
  transform: translateY(-50%);
}
.form form .field i.active::before{
  color: #333;
  content: "\f070";
}
.form .link{
  text-align: center;
  margin: 10px 0;
  font-size: 17px;
}
.form .link a{
  color: #333;
}
.form .link a:hover{
  text-decoration: underline;
}


/* Users List CSS Start */
.users{
  padding: 25px 30px;
}
.users header,
.users-list a{
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6e6e6;
  justify-content: space-between;
}
.wrapper img{
  object-fit: cover;
  border-radius: 50%;
}
.users header img{
  height: 50px;
  width: 50px;
}
:is(.users, .users-list) .content{
  display: flex;
  align-items: center;
}
:is(.users, .users-list) .content .details{
  color: #000;
  margin-left: 20px;
}
:is(.users, .users-list) .details span{
  font-size: 18px;
  font-weight: 500;
}
.users header .logout{
  display: block;
  background: #333;
  color: #fff;
  outline: none;
  border: none;
  padding: 7px 15px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 17px;
}
.users .search{
  margin: 20px 0;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}
.users .search .text{
  font-size: 18px;
}
.users .search input{
  position: absolute;
  height: 42px;
  width: calc(100% - 50px);
  font-size: 16px;
  padding: 0 13px;
  border: 1px solid #e6e6e6;
  outline: none;
  border-radius: 5px 0 0 5px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}
.users .search input.show{
  opacity: 1;
  pointer-events: auto;
}
.users .search button{
  position: relative;
  z-index: 1;
  width: 47px;
  height: 42px;
  font-size: 17px;
  cursor: pointer;
  border: none;
  background: #fff;
  color: #333;
  outline: none;
  border-radius: 0 5px 5px 0;
  transition: all 0.2s ease;
}
.users .search button.active{
  background: #333;
  color: #fff;
}
.search button.active i::before{
  content: '\f00d';
}
.users-list{
  max-height: 350px;
  overflow-y: auto;
}
:is(.users-list, .chat-box)::-webkit-scrollbar{
  width: 0px;
}
.users-list a{
  padding-bottom: 10px;
  margin-bottom: 15px;
  padding-right: 15px;
  border-bottom-color: #f1f1f1;
}
.users-list a:last-child{
  margin-bottom: 0px;
  border-bottom: none;
}
.users-list a img{
  height: 40px;
  width: 40px;
}
.users-list a .details p{
  color: #67676a;
}
.users-list a .status-dot{
  font-size: 12px;
  color: #468669;
  padding-left: 10px;
}
.users-list a .status-dot.offline{
  color: #ccc;
}

/* Chat Area CSS Start */
.chat-area header{
  display: flex;
  align-items: center;
  padding: 18px 30px;
}
.chat-area header .back-icon{
  color: #333;
  font-size: 18px;
}
.chat-area header img{
  height: 45px;
  width: 45px;
  margin: 0 15px;
}
.chat-area header .details span{
  font-size: 17px;
  font-weight: 500;
}
.chat-box{
  position: relative;
  min-height: 500px;
  max-height: 500px;
  overflow-y: auto;
  padding: 10px 30px 20px 30px;
  background: #f7f7f7;
  box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
              inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text{
  position: absolute;
  top: 45%;
  left: 50%;
  width: calc(100% - 50px);
  text-align: center;
  transform: translate(-50%, -50%);
}
.chat-box .chat{
  margin: 15px 0;
}
.chat-box .chat p{
  word-wrap: break-word;
  padding: 8px 16px;
  box-shadow: 0 0 32px rgb(0 0 0 / 8%),
              0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing{
  display: flex;
}
.chat-box .outgoing .details{
  margin-left: auto;
  max-width: calc(100% - 130px);
}
.outgoing .details p{
  background: #333;
  color: #fff;
  border-radius: 18px 18px 0 18px;
}
.chat-box .incoming{
  display: flex;
  align-items: flex-end;
}
.chat-box .incoming img{
  height: 35px;
  width: 35px;
}
.chat-box .incoming .details{
  margin-right: auto;
  margin-left: 10px;
  max-width: calc(100% - 130px);
}
.incoming .details p{
  background: #fff;
  color: #333;
  border-radius: 18px 18px 18px 0;
}
.typing-area{
  padding: 18px 30px;
  display: flex;
  justify-content: space-between;
}
.typing-area input{
  height: 45px;
  width: calc(100% - 58px);
  font-size: 16px;
  padding: 0 13px;
  border: 1px solid #e6e6e6;
  outline: none;
  border-radius: 5px 0 0 5px;
}
.typing-area button{
  color: #fff;
  width: 55px;
  border: none;
  outline: none;
  background: #333;
  font-size: 19px;
  cursor: pointer;
  opacity: 0.7;
  pointer-events: none;
  border-radius: 0 5px 5px 0;
  transition: all 0.3s ease;
}
.typing-area button.active{
  opacity: 1;
  pointer-events: auto;
}

/* Responive media query */
@media screen and (max-width: 450px) {
  .form, .users{
    padding: 20px;
  }
  .form header{
    text-align: center;
  }
  .form form .name-details{
    flex-direction: column;
  }
  .form .name-details .field:first-child{
    margin-right: 0px;
  }
  .form .name-details .field:last-child{
    margin-left: 0px;
  }

  .users header img{
    height: 45px;
    width: 45px;
  }
  .users header .logout{
    padding: 6px 10px;
    font-size: 16px;
  }
  :is(.users, .users-list) .content .details{
    margin-left: 15px;
  }

  .users-list a{
    padding-right: 10px;
  }

  .chat-area header{
    padding: 15px 20px;
  }
  .chat-box{
    min-height: 400px;
    padding: 10px 15px 15px 20px;
  }
  .chat-box .chat p{
    font-size: 15px;
  }
  .chat-box .outogoing .details{
    max-width: 230px;
  }
  .chat-box .incoming .details{
    max-width: 265px;
  }
  .incoming .details img{
    height: 30px;
    width: 30px;
  }
  .chat-area form{
    padding: 20px;
  }
  .chat-area form input{
    height: 40px;
    width: calc(100% - 48px);
  }
  .chat-area form button{
    width: 45px;
  }
}
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Online Chat App | Hello World</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head><body>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
  <div class="wrapper" id="wrapper">
    <section class="chat-area" id="chat-area">
      <header>
        <div class="details">
          <span>User</span>
          <p>Active now</p>
        </div>
      </header>
      <div class="chat-box">
      <div class="chat incoming">
      <div class="details">
      <p>j</p>
      </div>
      </div>
      <div class="chat incoming">
      <div class="details">
      <p>j</p>
      </div>
      </div>
      <div class="chat incoming">
      <div class="details">
        <p>j</p>
        </div>
        </div><div class="chat incoming">
        <div class="details">
          <p>j</p>
        </div>
        </div><div class="chat incoming">
        <div class="details">
          <p>j</p>
        </div>
        </div><div class="chat incoming">
        <div class="details">
          <p>j</p>
        </div>
        </div><div class="chat incoming">
        <div class="details">
          <p>j</p>
        </div>
        </div><div class="chat outgoing">
        <div class="details">
          <p>tst</p>
        </div>
        </div><div class="chat outgoing">
        <div class="details">
          <p>test</p>
        </div>
        </div><div class="chat outgoing">
        <div class="details">
          <p>test</p>
        </div>
        </div></div>
      <form action="#" class="typing-area">
        <input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
        <input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
        <button><i class="fab fa-telegram-plane"></i></button>
      </form>
    </section>
  </div>
  </body></html>

我希望&lt;div class="wrapper"&gt; 在设备高度不合适时垂直调整大小。因此，当我将浏览器缩小到较小的高度时，它看起来会随之缩小。我也希望外观保持不变。我试图做display: flex;，但它只是让一切无处不在。我好像做不到。我正在尝试使用 JavaScript 来实现，但它并没有按应有的方式工作。更改视口高度没有帮助。

【问题讨论】：

  • 我知道你的标签说 html 和 css .. 所以我在评论中提到了这一点.. 我已经这样做了很多次，最简单的方法是使用 JavaScript 监听器来监视在您想要收听的内容中显示调整大小（除了在文档准备好时运行调整大小功能）。它以像素为单位抓取显示（视口）高度并相应地设置包装器的高度。
  • 好的。我怎样才能做到这一点？我可以获得指向问题答案的链接吗？
  • stackoverflow.com/questions/19193801/… -- 最后有一个 jQuery 答案可以帮助您入门..
  • 我去看看
  • 您的描述有点混乱，您是否希望页眉/页脚保持原位，而当高度变化时正文会缩小/增长？如果是这样，那么您可以使用 flex 轻松完成此操作，无需 js

标签： javascript html css


【解决方案1】：

这就是你要找的吗？从描述中我不是 100% 确定

我添加的唯一 css 在 css 部分的底部

.chat-area {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
  flex-shrink: 0;
}
.chat-box {
  flex-grow: 1;
  min-height: auto;
}

以上是我添加的唯一 css，min-height: auto; 是为了覆盖您的原始代码。原代码未修改

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f7f7f7;
  padding: 0 10px;
}

.wrapper {
  background: #fff;
  max-width: 450px;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
}


/* Login & Signup Form CSS Start */

.form {
  padding: 25px 30px;
}

.form header {
  font-size: 25px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}

.form form {
  margin: 20px 0;
}

.form form .error-text {
  color: #721c24;
  padding: 8px 10px;
  text-align: center;
  border-radius: 5px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  margin-bottom: 10px;
  display: none;
}

.form form .name-details {
  display: flex;
}

.form .name-details .field:first-child {
  margin-right: 10px;
}

.form .name-details .field:last-child {
  margin-left: 10px;
}

.form form .field {
  display: flex;
  margin-bottom: 10px;
  flex-direction: column;
  position: relative;
}

.form form .field label {
  margin-bottom: 2px;
}

.form form .input input {
  height: 40px;
  width: 100%;
  font-size: 16px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.form form .field input {
  outline: none;
}

.form form .image input {
  font-size: 17px;
}

.form form .button input {
  height: 45px;
  border: none;
  color: #fff;
  font-size: 17px;
  background: #333;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 13px;
}

.form form .field i {
  position: absolute;
  right: 15px;
  top: 70%;
  color: #ccc;
  cursor: pointer;
  transform: translateY(-50%);
}

.form form .field i.active::before {
  color: #333;
  content: "\f070";
}

.form .link {
  text-align: center;
  margin: 10px 0;
  font-size: 17px;
}

.form .link a {
  color: #333;
}

.form .link a:hover {
  text-decoration: underline;
}


/* Users List CSS Start */

.users {
  padding: 25px 30px;
}

.users header,
.users-list a {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6e6e6;
  justify-content: space-between;
}

.wrapper img {
  object-fit: cover;
  border-radius: 50%;
}

.users header img {
  height: 50px;
  width: 50px;
}

:is(.users,
.users-list) .content {
  display: flex;
  align-items: center;
}

:is(.users,
.users-list) .content .details {
  color: #000;
  margin-left: 20px;
}

:is(.users,
.users-list) .details span {
  font-size: 18px;
  font-weight: 500;
}

.users header .logout {
  display: block;
  background: #333;
  color: #fff;
  outline: none;
  border: none;
  padding: 7px 15px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 17px;
}

.users .search {
  margin: 20px 0;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}

.users .search .text {
  font-size: 18px;
}

.users .search input {
  position: absolute;
  height: 42px;
  width: calc(100% - 50px);
  font-size: 16px;
  padding: 0 13px;
  border: 1px solid #e6e6e6;
  outline: none;
  border-radius: 5px 0 0 5px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}

.users .search input.show {
  opacity: 1;
  pointer-events: auto;
}

.users .search button {
  position: relative;
  z-index: 1;
  width: 47px;
  height: 42px;
  font-size: 17px;
  cursor: pointer;
  border: none;
  background: #fff;
  color: #333;
  outline: none;
  border-radius: 0 5px 5px 0;
  transition: all 0.2s ease;
}

.users .search button.active {
  background: #333;
  color: #fff;
}

.search button.active i::before {
  content: '\f00d';
}

.users-list {
  max-height: 350px;
  overflow-y: auto;
}

:is(.users-list,
.chat-box)::-webkit-scrollbar {
  width: 0px;
}

.users-list a {
  padding-bottom: 10px;
  margin-bottom: 15px;
  padding-right: 15px;
  border-bottom-color: #f1f1f1;
}

.users-list a:last-child {
  margin-bottom: 0px;
  border-bottom: none;
}

.users-list a img {
  height: 40px;
  width: 40px;
}

.users-list a .details p {
  color: #67676a;
}

.users-list a .status-dot {
  font-size: 12px;
  color: #468669;
  padding-left: 10px;
}

.users-list a .status-dot.offline {
  color: #ccc;
}


/* Chat Area CSS Start */

.chat-area header {
  display: flex;
  align-items: center;
  padding: 18px 30px;
}

.chat-area header .back-icon {
  color: #333;
  font-size: 18px;
}

.chat-area header img {
  height: 45px;
  width: 45px;
  margin: 0 15px;
}

.chat-area header .details span {
  font-size: 17px;
  font-weight: 500;
}

.chat-box {
  position: relative;
  min-height: 500px;
  max-height: 500px;
  overflow-y: auto;
  padding: 10px 30px 20px 30px;
  background: #f7f7f7;
  box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%), inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}

.chat-box .text {
  position: absolute;
  top: 45%;
  left: 50%;
  width: calc(100% - 50px);
  text-align: center;
  transform: translate(-50%, -50%);
}

.chat-box .chat {
  margin: 15px 0;
}

.chat-box .chat p {
  word-wrap: break-word;
  padding: 8px 16px;
  box-shadow: 0 0 32px rgb(0 0 0 / 8%), 0rem 16px 16px -16px rgb(0 0 0 / 10%);
}

.chat-box .outgoing {
  display: flex;
}

.chat-box .outgoing .details {
  margin-left: auto;
  max-width: calc(100% - 130px);
}

.outgoing .details p {
  background: #333;
  color: #fff;
  border-radius: 18px 18px 0 18px;
}

.chat-box .incoming {
  display: flex;
  align-items: flex-end;
}

.chat-box .incoming img {
  height: 35px;
  width: 35px;
}

.chat-box .incoming .details {
  margin-right: auto;
  margin-left: 10px;
  max-width: calc(100% - 130px);
}

.incoming .details p {
  background: #fff;
  color: #333;
  border-radius: 18px 18px 18px 0;
}

.typing-area {
  padding: 18px 30px;
  display: flex;
  justify-content: space-between;
}

.typing-area input {
  height: 45px;
  width: calc(100% - 58px);
  font-size: 16px;
  padding: 0 13px;
  border: 1px solid #e6e6e6;
  outline: none;
  border-radius: 5px 0 0 5px;
}

.typing-area button {
  color: #fff;
  width: 55px;
  border: none;
  outline: none;
  background: #333;
  font-size: 19px;
  cursor: pointer;
  opacity: 0.7;
  pointer-events: none;
  border-radius: 0 5px 5px 0;
  transition: all 0.3s ease;
}

.typing-area button.active {
  opacity: 1;
  pointer-events: auto;
}


/* Responive media query */

@media screen and (max-width: 450px) {
  .form,
  .users {
    padding: 20px;
  }
  .form header {
    text-align: center;
  }
  .form form .name-details {
    flex-direction: column;
  }
  .form .name-details .field:first-child {
    margin-right: 0px;
  }
  .form .name-details .field:last-child {
    margin-left: 0px;
  }
  .users header img {
    height: 45px;
    width: 45px;
  }
  .users header .logout {
    padding: 6px 10px;
    font-size: 16px;
  }
   :is(.users,
  .users-list) .content .details {
    margin-left: 15px;
  }
  .users-list a {
    padding-right: 10px;
  }
  .chat-area header {
    padding: 15px 20px;
  }
  .chat-box {
    min-height: 400px;
    padding: 10px 15px 15px 20px;
  }
  .chat-box .chat p {
    font-size: 15px;
  }
  .chat-box .outogoing .details {
    max-width: 230px;
  }
  .chat-box .incoming .details {
    max-width: 265px;
  }
  .incoming .details img {
    height: 30px;
    width: 30px;
  }
  .chat-area form {
    padding: 20px;
  }
  .chat-area form input {
    height: 40px;
    width: calc(100% - 48px);
  }
  .chat-area form button {
    width: 45px;
  }
}

.chat-area {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.chat-area header,
.chat-area typing-area {
  flex-shrink: 0;
}

.chat-box {
  flex-grow: 1;
  min-height: auto;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Online Chat App | Hello World</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>

<body>
  <input id="hidden" type="hidden" value="7">
  <div class="wrapper">
    <section class="chat-area">
      <header>
        <a href="users.php" class="back-icon"><i class="fas fa-arrow-left"></i></a>
        <img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
        <div class="details">
          <span>Justin Skinner</span>
          <p>Active now</p>
        </div>
      </header>
      <div class="chat-box">
        <div class="chat incoming">
          <img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
          <div class="details">
            <p>j</p>
          </div>
        </div>
        <div class="chat incoming">
          <img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
          <div class="details">
            <p>j</p>
          </div>
        </div>
        <div class="chat incoming">
          <img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
          <div class="details">
            <p>j</p>
          </div>
        </div>
        <div class="chat incoming">
          <img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
          <div class="details">
            <p>j</p>
          </div>
        </div>
        <div class="chat incoming">
          <img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
          <div class="details">
            <p>j</p>
          </div>
        </div>
        <div class="chat incoming">
          <img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
          <div class="details">
            <p>j</p>
          </div>
        </div>
        <div class="chat incoming">
          <img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
          <div class="details">
            <p>j</p>
          </div>
        </div>
        <div class="chat outgoing">
          <div class="details">
            <p>tst</p>
          </div>
        </div>
        <div class="chat outgoing">
          <div class="details">
            <p>test</p>
          </div>
        </div>
        <div class="chat outgoing">
          <div class="details">
            <p>test</p>
          </div>
        </div>
      </div>
      <form action="#" class="typing-area">
        <input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
        <input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
        <button><i class="fab fa-telegram-plane"></i></button>
      </form>
    </section>
  </div>

  <script src="javascript/chat.js"></script>
</body>

</html>

【讨论】：

  • 关键是flex容器需要隐藏高度和溢出，并且你的中间体需要有flex增长。
【解决方案2】：

下面是使用 this answer 使用 flexbox 的方法。

JSFiddle

body{
  height:100vh
}

.wrapper{
  height:100%;
}

.chat-area{
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
  height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}

.chat-box{
  flex: 1; /* takes the remaining height of the "container" div */
  overflow: auto; /* to scroll just the "main" div */
}

【讨论】：

    猜你喜欢
    • 2020-09-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode