Блог

Я работаю над новым макетом для своего веб-сайта, и я хочу, чтобы пользователь мог изменять представления. Один вид представляет собой статическое изображение высотой 540 пикселей с горизонтальным / вертикальным центром. Вторая больше не центрирована по вертикали и позволяет контенту определять высоту.

В настоящее время он работает с первым вариантом, но во втором варианте столбец утилиты (статистика использования браузеров за 2011 год) не заполняет всю высоту. Есть ли решение для этого?

Я не знаю, сколько исходного кода вам нужно. Я привел ссылку на свой веб-сайт и различия в коде CSS ниже.

Мой веб-сайт

Первый вариант (в настоящее время работает):

 #floater {
    margin-bottom: -27em; /* vertical center - half of container's height */
    height: 50%; /* vertical center */
}
#wrapper {
    height: 54em; /* vertical center */
}
#content {
    height: 33em; /* static height */
}
  

Второй вариант (не работает):

 #floater {
    margin-bottom: 0em; /* vertical top */
    height: auto; /* vertical top */
}
#wrapper {
    height: auto; /* vertical 100% */
}
#content {
    height: 100%; /* dynamic height */
}
  

Подумайте о том, что вы делаете, в сравнении с тем, что вы говорите:

 #content {
    height: 100%; /* dynamic height */
}
  

но во втором варианте столбец утилиты (статистика использования браузеров за 2011 год) не заполняет всю высоту

Вы можете выбрать только один. Вы хотите, чтобы он заполнял всю высоту или был динамическим?