0

Что я имею

Код:

<div id="mainContent" class="row">
        <div class="col-6 offset-3 text-center">
            <h3>Чат.</h3>
            <div class="bg-light rounded" id="chat-block">
                <form action="">
                    <input type="text" name="message" class="form-control" id="message">
                </form>
            </div>
        </div>
    </div>

Я должен поле ввода спустить вниз блока в котором оно находится. Как это сделать?

1
  • 1) Сделать абсолютное позицирование. 2) Использование display:flex; и margin: auto 0 0 0; соответственно. 3)
    – MoloF
    10 июн 2019 в 14:47

1 ответ 1

1

Вообще, так:

#mainContent {
  position: relative; /* Чтобы абсолютный элемент внутри позиционировался относительно этого */
  padding-bottom: 20px; /* по размеру инпута */
  height: 200px; background-color: #ddd;
}

#message {
  position: absolute;
  bottom: 0; /* Прилипнет к нижней рамке родителя (если у последнего будет position) */
}
<div id="mainContent" class="row">
  <div class="col-6 offset-3 text-center">
    <h3>Чат.</h3>
    <div class="bg-light rounded" id="chat-block">
      <form action="">
        <input type="text" name="message" class="form-control" id="message">
      </form>
    </div>
  </div>
</div>

Но было бы легче просто разделить блоки, чтобы инпут пошел сразу после серого блока. А не был вложен в него.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.