Javascript 无法设置div元素的高度

我正在制作一个聊天网络应用程序，我想在给定图像的红线上方设置消息

我的HTML是

    <div id="messages">
        <ul style="list-style-type:none;"> <!-- update msg here -->  </ul>
    </div>

    <div class="user-field">
        <input id="write-msg" type="text" placeholder="Type your message here....">
        <button class="send"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
    </div>

</div>

添加这样的样式

.user-field {
  width: 50%;
  bottom: 10px;
  width: 100%;
  height: 7%;
  padding: 5px;
  background-color: rgb(207, 209, 208);
  margin: auto;
  display: inline-block;
}

#messages {
  background-color: rgb(207, 209, 208);
  overflow: scroll;
}

添加这样的样式

.user-field {
  width: 50%;
  bottom: 10px;
  width: 100%;
  height: 7%;
  padding: 5px;
  background-color: rgb(207, 209, 208);
  margin: auto;
  display: inline-block;
}

#messages {
  background-color: rgb(207, 209, 208);
  overflow: scroll;
}

---

如果要以百分比（%）设置特定元素的高度，则该元素的父元素必须具有固定的高度

例如：

<div id="parent">
   <div id="messages">
      <ul style="list-style-type:none;"> <!-- update msg here -->  </ul>
   </div>

   <div class="user-field">
       <input id="write-msg" type="text" placeholder="Type your message here....">
       <button class="send"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
    </div>
</div>

---

然后，div#消息高度将是其父div#父级高度的93%，即500px

如果要以百分比（%）设置特定元素的高度，则该元素的父元素必须具有固定的高度

例如：

<div id="parent">
   <div id="messages">
      <ul style="list-style-type:none;"> <!-- update msg here -->  </ul>
   </div>

   <div class="user-field">
       <input id="write-msg" type="text" placeholder="Type your message here....">
       <button class="send"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
    </div>
</div>

---

然后，div#消息高度将是其父div#父级高度的93%，即500px

我使用flex创建了聊天框，并给了一个父div，还修改了一些css。请看一看

.chatbox{
宽度：300px；
显示器：flex；
弯曲方向：立柱；
高度：300px；
位置：固定；
底部：0；
右：0；
}
.用户字段{
宽度：100%；
高度：50px；
填充物：5px；
背景色：rgb（207209208）；
保证金：自动；
显示器：flex；
框大小：边框框；
}
.用户字段输入{
宽度：100%；
}
.用户字段按钮{
宽度：50px；
}
#信息{
背景色：rgb（207209208）；
溢出：自动；
显示：块；
高度：计算（100%-50px）；
}

我使用flex创建了聊天框，并给出了一个父div，还修改了一些css。请看一看

.chatbox{
宽度：300px；
显示器：flex；
弯曲方向：立柱；
高度：300px；
位置：固定；
底部：0；
右：0；
}
.用户字段{
宽度：100%；
高度：50px；
填充物：5px；
背景色：rgb（207209208）；
保证金：自动；
显示器：flex；
框大小：边框框；
}
.用户字段输入{
宽度：100%；
}
.用户字段按钮{
宽度：50px；
}
#信息{
背景色：rgb（207209208）；
溢出：自动；
显示：块；
高度：计算（100%-50px）；
}

您需要在消息部分定义位置属性

*{
框大小：边框框；
}
身体{
填充：0；
保证金：0；
}
.家长瓦珀{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
}
.用户字段{
位置：绝对位置；
左：0；
底部：10px；
宽度：100%；
高度：50px；
填充物：5px；
背景色：rgb（207209208）；
保证金：自动；
显示：块；
z指数：2；
}
#信息{
背景色：rgb（207209150）；
溢出：隐藏；
溢出y：滚动；
宽度：100%；
高度：计算（100%-50px-10px）；/*50px用于字符输入部分，10px用于从底部设置*/
位置：绝对位置；
左：0；
排名：0；
}

Lorem ipsum Door sit amet，
为精英献身，并为其提供服务
劳工和财产的暂时性损失。

他在乌拉姆科实验室实习，并在普通实验室实习
在沃鲁帕特·维利特·埃塞的雷德赫德雷特，两人或两人的关系
无侧壁纤毛，但不包括无侧壁纤毛
傲慢的人，必须为自己的行为负责。


Lorem ipsum Door sit amet，
为精英献身，并为其提供服务
劳工和财产的暂时性损失。

他在乌拉姆科实验室实习，并在普通实验室实习
在沃鲁帕特·维利特·埃塞的雷德赫德雷特，两人或两人的关系
无侧壁纤毛，但不包括无侧壁纤毛
傲慢的人，必须为自己的行为负责。


发送

您需要在消息部分定义位置属性

*{
框大小：边框框；
}
身体{
填充：0；
保证金：0；
}
.家长瓦珀{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
}
.用户字段{
位置：绝对位置；
左：0；
底部：10px；
宽度：100%；
高度：50px；
填充物：5px；
背景色：rgb（207209208）；
保证金：自动；
显示：块；
z指数：2；
}
#信息{
背景色：rgb（207209150）；
溢出：隐藏；
溢出y：滚动；
宽度：100%；
高度：计算（100%-50px-10px）；/*50px用于字符输入部分，10px用于从底部设置*/
位置：绝对位置；
左：0；
排名：0；
}

Lorem ipsum Door sit amet，
为精英献身，并为其提供服务
劳工和财产的暂时性损失。

他在乌拉姆科实验室实习，并在普通实验室实习
在沃鲁帕特·维利特·埃塞的雷德赫德雷特，两人或两人的关系
无侧壁纤毛，但不包括无侧壁纤毛
傲慢的人，必须为自己的行为负责。


Lorem ipsum Door sit amet，
为精英献身，并为其提供服务
劳工和财产的暂时性损失。

他在乌拉姆科实验室实习，并在普通实验室实习
在沃鲁帕特·维利特·埃塞的雷德赫德雷特，两人或两人的关系
无侧壁纤毛，但不包括无侧壁纤毛
傲慢的人，必须为自己的行为负责。


发送