Блок на оставшуюся высоту
Всем привет!
Подскажите пожалуйста, как можно сделать следующее: есть некий блок, у которого высота и ширина может быть любой, в этом блоке есть ещё два блока, у первого фиксированная высота, а высота второго должна занимать всё оставшееся место. Ещё нужно учесть, что первого блока может и не быть вовсе. Т.е., должно получиться аналогично двум строкам таблицы, если у первой заданна фиксированная ширина. Вот набросок: 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, время: 21:44. |