В чем была основная задача?
Сделать для админки 2 равные адаптивные колонки, равные высоте экрана (при условии малого содержания), с прижатым футером (опционально).Способы с фоном я не рассматривал.
Получилось реализовать в 4 вариантах.
1) Flex-box - думаю, что некорректно при адаптивом дизайне менять flex на diplay:block - надо задействовать все прелести этого способа, но знаний пока не хватает и сходу не получилось сделать... в любом случае рабочий вариант
jsfiddle.net/dkweb/jjphg7aj
2) Табличная верстка - в мобильной верстке таблица (логично) не учитывает высоту блока (a.mobile), но это ерунда.. получается основное тело - это вложенная таблица, которая делится на две ячейки - sidebar и content. Отступ в content влияет на меню... не получается избавиться. И даже если у контента вывести в ноль - все рано зазор остается. Сделал контрастным... где копать? Вообще получается сильная взаимосвязь между ними - любое форматирование так или иначе влияет на обе колонки.
jsfiddle.net/dkweb/woz5mjph/1
3) Вложенные колонки - ну тут не мытьем так катаньем, вроде получилось достигнуть нужного результата... всем доволен. Буду признателен, если потестируете...
Плюс - если высота контента больше высоты экрана, то скрипт выравнивания не применяется.
jsfiddle.net/dkweb/1urrut00
4) Ну и мой эпичный дизайн...тоже удалось достичь необходимого результата - только теперь возникает вопрос зачем?) из всех он получился самым сложным..
jsfiddle.net/dkweb/gubo2jmd/1
С одной стороны, что сложного высчитать самую высокую и присвоить ее высоту обеим колонкам за вычетом шапки?.
А то, что я не нашел ни единого способа отслеживать изменения размеров определенного блока! resize работает только применительно к window. Все способы оценить изменения других блоков в сети реализованы на таймере.
Поэтому функция выравнивания должна выполняться каждый раз, когда меняется высота контента (выезжающие формы, например). Но ладно, если есть возможность прописать callback. А вот CKeditor? грузится страница и только потом textarea меняет свою высоту... и все выезжает за границы contentа. Чего только не перепробовал...
Поэтому все-же пришлось ставить минимальный timeout.
Я просто уверен, что есть элементарное решение этого вопроса... но найти самостоятельно не смог.
Да, еще заморочка была с подгрузкой шрифтов через @ import.. Тоже самое.. сначала выравнивание, потом шрифт и все сползает.
Поэтому благодаря совету применил следующее:
document.onreadystatechange = function() {
if (document.readyState === 'complete') {
setTimeout(hh, 350);
}
}; //выравнивание блоков после загрузке контента и шрифтов
Но возможно я не правильно "списал" код... в фидлере не срабатывает.
Как итог все они рабочие, но футер держится только в таблице и flex.
В общем вряд ли кто-то до сюда дочитает, но если вдруг, буду очень признателен за комментарии и предложения по всем вариантам.
Спасибо!
Простой
