100% высота div

У меня есть #main div, что я хотел бы заполнить страницу между верхним и нижним колонтитулами, когда нет содержимого. Когда есть контент, он должен подталкивать липкий нижний колонтитул вниз, что и происходит.100% высота div

CSS:

#main { 
background: transparent url("images/main-content.png") top right repeat-y; 
clear: both; 
overflow: hidden; 
margin-top: -10px; 
height: 100%; 
min-height: 100%; 
}

Я не знаю, почему это не работает. #main наследует от #wrapper и body, поэтому я думаю, что создание 100% высоты и минимальной высоты 100% будет работать.

Сайт:

http://www.dentistrywithsmiles.com

Заранее спасибо за помощь в этом.

источник

2011-02-09 blackessej

Это height: auto !important; где-то около линии 146 вашего файла CSS.

Это превосходит 100% -ную высоту вашей обертки, которая не позволяет вашему основному div расти. Поскольку ваш нижний колонтитул имеет постоянную высоту, я бы попробовал добавить дополнение к обертке, чтобы основной контент div не ел в нижнем колонтитуле, что и происходит, когда вы поворачиваете height: auto !important;.

источник

2011-02-09 22:02:43 Blender

Спасибо @Blender - можете ли вы привести пример дополнений, которые вы добавили бы? Если я добавлю прописью на дно '# wrapper', это просто подтолкнет мой нижний колонтитул, и я хочу, чтобы он оставался липким. – blackessej

Извините, у меня есть много дел, поэтому, возможно, позже я могу что-то взбить. Если ваш контент 'div' должен принять высоту, которая заполняет страницу и не позволяет нижнему колонтитулу сканировать выше высоты страницы, зачем поселиться с липким нижним колонтитулом? Вы можете указать минимальную высоту для этого div, и вы будете установлены, так как она уже подталкивает нижний колонтитул 'div'. просто думать ... – Blender

Это может быть не совсем необходимо, но я бы хотел сохранить липкий нижний колонтитул, чтобы, если страница не имеет большого содержания, содержимое 'div' соответствует нижнему колонтитулу независимо от разрешения экрана и браузера. Это очень важно для клиента. – blackessej

Добавить display:inline-block в #main (или в #wrapper, в зависимости от того, что вы хотите сделать). Элементы с display:block (например, тег div или p по умолчанию) имеют 100% ширину и высоту, которые настраиваются на содержимое.

источник

2011-02-09 22:10:21

100% высота div

ответ

Смежные вопросы