Автоматическая высота для встроенных разделителей

#html #css

#HTML #css — файл #css

Вопрос:

У меня есть две встроенные таблицы divs (содержимое и боковая панель), и я хотел бы иметь одинаковую высоту независимо от содержимого. Я пробовал разные атрибуты, но ничего не работает. Вот веб-сайт: http://jj09.studentlive.pl /

Ответ №1:

Я нашел простое решение:

 #main { display: table; }
#main > div { float: none; display: table-cell; vertical-align: top; }
  

Ответ №2:

Используя jQuery, вы могли бы это сделать.

 $(function(){
    var c = $("#content").outerHeight();
    var s = $("#side").outerHeight();
    var h = (s > c)? s : c;
    $("#content, #side").height(h);
});
  

В HTML не так много других вещей, которые вы можете сделать. Вы могли бы придать своему #main цвет фона как таковой background: #F0F0F0; , чтобы создать иллюзию, что он одинаковой высоты.

Ответ №3:

Поместите вокруг них родительский раздел, установите для разделов содержимого и боковой панели значение высоты: 100%. По мере увеличения размера одного div это приведет к увеличению родительского div, а другой div всегда будет увеличиваться до 100% высоты.

Примечание: смотрите комментарии для уточнения. Родительский div также должен содержать overflow:auto.

Комментарии:

1. Это не сработает, если родительская высота не имеет определенной высоты, которая не является процентом, если только каждый родительский элемент после этого не равен 100% вплоть до тела, а затем до html-тега.

2. Вы правы, вам нужно либо указать высоту, либо согласиться с тем, что контейнер <div> будет расширяться до 100% страницы, если вы используете этот метод. Вы можете использовать процент, однако, насколько я проверял.