Как мне опустить кнопки чата?

Question

[tokoronad]

мне нужно опустить вниз кнопки отправить и закрыть, как это сделать
html:

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>   
<script type="importmap">
  {
      "imports": {
          "three": "https://unpkg.com/three@0.151.0/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@0.151.0/examples/jsm/"
      }
  }
  </script>
<script type="module" src="script/script.js"></script>
<button class="open-button" onclick="openForm()">Чат</button>

<div class="chat-popup" id="myForm">
  <form class="form-container">
    <h1>Чат</h1>
    <ul class="messages">
    </ul>
    <canvas id="canvas"></canvas>
    <label for="msg"><b>Сообщение</b></label>
    <textarea placeholder="Тип сообщения.." id="msg" required ></textarea>
    <button id="submit" class="btn" type="button" onclick="exportdate()">Отправить</button>
    <button id="button" class="btn cancel" onclick="closeForm()">Закрыть</button>
  </form>
</div>

js:

window.openForm = function openForm() { 
  document.getElementById("myForm").style.display = "block"; 
} 

window.closeForm = function closeForm() { 
  document.getElementById("myForm").style.display = "none"; 
} 

window.exportdate = function exportdate() { 
  const dataval = document.getElementById("msg").value; 

  for(let value of states){ 
    if(dataval === value){ 
      data = dataval; 
      fadeToAction(data, 1); // вызываем функцию fadeToAction() после установки значения data
      break; // выходим из цикла, если нашли значение
    } 
  }
  
}

css:

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

.form-container {
  max-width: 520px;
  height:900px;
  padding: 10px;
  background-color: white;
}

.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 30px;
}

.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  margin-bottom:10px;
  opacity: 0.8;
}

.form-container .cancel {
  background-color: red;
}

.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

Comments

[Дмитрий Кузнецов]

В чём собственно у вас сложность? Не знаете про flex?

Answer 1

[Антон Романков]

Вот так: https://codepen.io/romant094/pen/rNqWzYX