-1

Есть 4 резиновых div. Расположены они по такой схеме:

┌────┬────┬────┐
│ w1 │ w2 │ w3 │
├────┴────┴────┤
│      w4      │
└──────────────┘

Вот код:

div {
  height: 50%;
  width: 33.3%;
}

div div {
  overflow-y: visible;
  max-height: 100%;
}

#w1 {
  position: absolute;
  top: 0;
  left: 0;
}

#w2 {
  position: absolute;
  top: 0;
  left: 33.3%;
}

#w3 {
  position: absolute;
  top: 0;
  left: 66.5%;
}

#w4 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100% !important;
}
<div id="w1">
  <div id="content1"></div>sometext<input type="text"></div>
<div id="w2">
  <div id="content2"></div>sometext<input type="text"></div>
<div id="w3">
  <div id="content3"></div>sometext<input type="text"></div>
<div id="w4"></div>

Javascript периодически получает данные с сервера с помощью AJAX и добавляет их в #content1, #content2 и #content3.
Проблема в том, что в #w1 #w2 #w3 не должно быть скроллбаров, так как они уже есть в их content, но content расширяются и вытесняют sometext за пределы div. Поставить max-height: 80% нельзя, так как content при расширении должен прислонить sometext к границе и активировать скроллбар. В моём варианте расширение останавливается когда content достигает границы сам.

1 ответ 1

1

Вопроса нету. Что сделать нужно ? Если Вы хотите прижать блок с инпутом вниз, Вам нужно сделать padding-bottom: 50px у #w1, #w2, #w3, и потом на input[type="text"] сделать position: absolute; bottom: 0px; Тогда Вы его поместите в заранее зарезервированное место и он будет там. Это если говорить о текущей структуре которую я вижу.

Но скорее всего, я не правильно понимаю Ваш вопрос. Покажите на картинке.

1
  • Про свойство bottom я только сейчас узнал, проблема решена. 13 авг 2019 в 14:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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