html - 似乎无法让表格出现在 div 中？

Question

我正在尝试创建一个表格，该表格贴在显示“常规”和“编程”的 div 底部。

这是一张照片:

我已经尝试了很多东西，但似乎无法让表格出现...当我确实让东西出现时，我也无法让它粘在底部.谁能帮忙？

我正在使用 Bootstrap

这是我的 HTML:

<div class="chatroom">
  <div id="contain">
    <div id="channels">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action active">General</a>
        <a href="#" class="list-group-item list-group-item-action">Programming</a>
      </div>
       <div id="bar"></div>
       <form id="create-channel">
          <div class="form-group">
            <input type="text" id="c" class="form-control" autocomplete="off"></div>
        </form>
    </div>
    <div id="chat">
      <ul id="messages">
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
      </ul>
      <div class="input">
        <form>
            <div class="form-group">
              <input type="text" id="m" class="form-control" autocomplete="off"></div>
        </form>
      </div>
    </div>
  </div>
</div>

和 CSS:

body {
  background-color: azure;
  background: url(../images/background.jpg) no-repeat center center fixed;
  -webkit-background-size:cover;
  background-size:cover;
}

.chatroom {
  width: 90vw;
  height: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;

  border: 2px solid white;
  border-radius: 30px;
  background-color: white;
  opacity:.8;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  flex-direction: column;

}
.input {
  height: 40px;
  width: 98%;
  margin-left:1%;
  margin-top: auto;
}

#chat .form-control{
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}

#chat{
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  float: right;
  height:100%;
  width: 75%;
  display: flex;
  flex-direction: column;
}
#channels{
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: white;
  width:25%;
  float: left;
  height:100%;
  overflow-y: hidden;
}
#bar{
  background-color:black;
  height:100%;
  float: right;
  width: 3px;
}
#contain{
  height:100%;
}
.list-group{
  font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
  font-size:20px;
  width:calc(100% - 3px);
  background-color:#bcbcbc;
  float:left;
  display:inline-block;
}

Answer 1

当我重新排列表单下方的栏 div 时，它工作正常。在这里查看:https://jsfiddle.net/vj2fyuLm/

  <form id="create-channel">
    <div class="form-group">
      <input type="text" id="c" class="form-control" placeholder="one" autocomplete="off"></div>
  </form>
  <div id="bar"></div>

更新

您可以像这样将整个表单放在列表组中:https://jsfiddle.net/vj2fyuLm/3/

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">General</a>
    <a href="#" class="list-group-item list-group-item-action">Programming</a>

         <form id="create-channel">
      <div class="form-group">
        <input type="text" id="c" class="form-control" placeholder="one" autocomplete="off"></div>
    </form>
  </div>