Совершено с колоннами Faux
Когда вы начинаете реализации макета сайта с помощью CSS и HTML DIV-ов, вы неизбежно столкнетесь с следующей проблемой:
Как мне силу 2 столбцы одинаковой высоты?
Вы хотите получить что-то вроде этого:
Но все, что вы делаете, вы не в состоянии продлить до боковой панели внизу. Вы в конечном итоге-то вроде этого:
Многие из них предложили использовать некоторые сложные методы CSS , чтобы обойти эту проблему, а на самом деле ни один из методов работы совершенно во всех случаях. Это утомительно, чтобы эти методы работы во многих ситуациях.
Некоторые из них предложили такие методы, как плитка фоновое изображение, дают ложное представление о длинные колонны. Эта техника называется Faux колонны . Это взломать почти работает, но вы знаете - это грязный хак тоже.
Люди всегда презирал использованием JavaScript решения на основе этой проблемы. Я не знаю почему, но позвольте мне сказать вам правду - JavaScript решения на основе этой проблемы не хуже, чем любое другое решение. В самом деле, если вы используете JavaScript, вы можете сохранить несколько часов после разочарования в попытке получить все работало. Люди будут предостеречь вас от этого, сказав, "Что произойдет, если пользователь выключил JavaScript?". Поверьте мне, если пользователь отключил JavaScript, большинство веб нарушается для него в любом случае. На боковой панели не имеет к нему. Не делайте вид, как она делает.
Вот как можно обойти проблему с помощью JQuery:
Положить что-то подобное в вашем готовы обработчик событий:
$ (". Боковой панели"). Высота (Math.max ($(". содержание "). Высоте (), $ (". Боковой панели "). ())); Высоте Вот и все. Теперь начать получать вещи делать, а не мастерить все эти мелкие детали, а также выйти пытаются использовать CSS, чтобы решить каждую сумасшедшие проблемы.
Я с вами полностью согласен. Люди уделяют слишком много внимания делать это правильно, а не делать это нормально так, чтобы не принимать в неделю. Для них я говорю Перестаньте беспокоиться, начала делать!
Означает ли это работать как есть, или у вас есть, чтобы добавить немного кода для обработки размера окна, шрифт размера, случай, когда текст в "содержание" меньше, чем текст в "боковой" и т.д.?
К сожалению, забыл еще один момент: я использовал такую технику, но без JQuery, и я был вопрос: если я изменении размера окна браузера Firefox, Javascript не получает "размер" событий, так что макет вестник вверх. Закончив изменение размера окна, все работает, хотя.
IIRC IE не имеет эту ошибку.
Хороший вопрос Фабьен, я думаю, вам придется рассматривать дела, где $ (". Боковой панели"). Высоте ()> $ (". Содержимое"). Высоте () в противном случае на боковой панели будет урезана и вы не будете видеть все свои содержания.
Спасибо за указатель. Один из моих клиентов столкнулся с этой проблемой, и мне пришлось проявить творческий подход в оказании им помощи. Приятно знать, что я не одинок.
Обычно я стараюсь исправить макет проблемы с CSS, я никогда не решили использовать JQuery раньше. Я, конечно, имел боковой проблемы, прежде чем! Постараюсь это в будущем, спасибо.
Мишель,
Мы обновили код для рассмотрения вашей жалобы.
Привет!
Простейшее решение я нашел, после серии и серии исследований несколько месяцев назад, заключается в использовании таблицы
Есть вещи, которые можно сделать с DIV-ов, а также ситуации, когда DIV-ов работы большой, но мы должны встретиться с ним. Если вы хотите создать макет, не хаки, таблицы являются лучшими.
Я думаю, что написал пост об этом несколько месяцев назад:
http://www.codigomanso.com/en/2009/02/should-i-use-tables-for-layout/
Во всяком случае, это, как вы упомянули проблемы с Фибоначчи. Вы можете использовать рекурсию, а если серьезно, если вы планируете вычислить более чем 30-й номер, что вы должны использовать это "за". Даже если вы хотите только десятым номером.
Действительно интересный блог, мне очень нравится!