Блок на оставшуюся высоту
Всем привет!
Подскажите пожалуйста, как можно сделать следующее: есть некий блок, у которого высота и ширина может быть любой, в этом блоке есть ещё два блока, у первого фиксированная высота, а высота второго должна занимать всё оставшееся место. Ещё нужно учесть, что первого блока может и не быть вовсе. Т.е., должно получиться аналогично двум строкам таблицы, если у первой заданна фиксированная ширина. Вот набросок: https://jsfiddle.net/xawe0pcd/ Можно ли это всё реализовать без использования display: table-* и флекса? Спасибо. |
Вариант, если внутри ток текст:
<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>
|
Deff, нет, там будет контент. Короче говоря, это всё будет модальным окном, первый блок - меню-бар, второй - контент с прокруткой.
Кажись, значит никак не сделать простыми способами. :) |
Ruslan_xDD,
Ни наю, чем табличка сложный элемент ? Просто следуя тренду ? ===================== Видел на хабре обсуждение подобного (но хоть убей не помню чем закончилось, но были идеи забавные, но кажись таблой и кончилось |
Deff, если таблой, то придётся ещё вложенный тэг в качестве ячейки делать + у меня там ещё внутри много абсолютно позиционированных элементов, которые должны относительно родителя ставиться, а в ФФ30- нельзя относительно ячеек позиционировать.
|
Ruslan_xDD,
А относительно tr - не пробовал ? Ксать там есть еще thead и tbody (ежли им relative, а внутрь absolute ? |
Deff, в ФФ30- относительно table/tr/td/tbody нельзя позиционировать.
|
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>
|
| Часовой пояс GMT +3, время: 20:15. |