Форум

ruslan_mart · #1 (**permalink**) 30.12.2015, 09:25

Всем привет!

Подскажите пожалуйста, как можно сделать следующее: есть некий блок, у которого высота и ширина может быть любой, в этом блоке есть ещё два блока, у первого фиксированная высота, а высота второго должна занимать всё оставшееся место. Ещё нужно учесть, что первого блока может и не быть вовсе. Т.е., должно получиться аналогично двум строкам таблицы, если у первой заданна фиксированная ширина.

Вот набросок: https://jsfiddle.net/xawe0pcd/

Можно ли это всё реализовать без использования display: table-* и флекса?

Спасибо.

Deff · #2 (**permalink**) 30.12.2015, 11:11

Вариант, если внутри ток текст:

<style>
.a {
  position:relative;
  border:blue 2px solid;
  width:300px; height:200px;
  overflow-y:hidden;
}
.b {
  position:relative;
  height:150px;
  background-color:#CE0508;
}
.c {
  height:100%;
  background-color:#0AA00D;
}
</style>
<div class=a>
<div class=b></div>
<div class=c></div>
</div>

ruslan_mart · #3 (**permalink**) 30.12.2015, 11:33

Deff, нет, там будет контент. Короче говоря, это всё будет модальным окном, первый блок - меню-бар, второй - контент с прокруткой.
Кажись, значит никак не сделать простыми способами.

Deff · #4 (**permalink**) 30.12.2015, 11:46

Ruslan_xDD,
Ни наю, чем табличка сложный элемент ?
Просто следуя тренду ?
=====================
Видел на хабре обсуждение подобного (но хоть убей не помню чем закончилось, но были идеи забавные, но кажись таблой и кончилось

ruslan_mart · #5 (**permalink**) 30.12.2015, 12:19

Deff, если таблой, то придётся ещё вложенный тэг в качестве ячейки делать + у меня там ещё внутри много абсолютно позиционированных элементов, которые должны относительно родителя ставиться, а в ФФ30- нельзя относительно ячеек позиционировать.

Deff · #6 (**permalink**) 30.12.2015, 12:52

Ruslan_xDD,
А относительно tr - не пробовал ?
Ксать там есть еще thead и tbody (ежли им relative, а внутрь absolute ?

ruslan_mart · #7 (**permalink**) 30.12.2015, 12:53

Deff, в ФФ30- относительно table/tr/td/tbody нельзя позиционировать.

Deff · #8 (**permalink**) 30.12.2015, 13:03

Ruslan_xDD,
Нет ФФ30
Но на всяк случай проверь:

<!DOCTYPE>
<html>
    <head></head>
    <body>
      <table>
        <tbody>
          <tr>
            <td width="300" height="100" style="position:relative;">
              <div style="margin:auto;top:0;left:0;right:0;bottom:0;position:absolute;border:red solid 1px;"></div>
            </td>
          </tr>
        </tbody>
      </table>
    </body>
  </html>

Форум

Справочник

Discord чат

Курсы javascript