2011-01-06 6 views
5

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

Установка min-height: 100%; и height: 100%;, похоже, не решает проблему, как вы думаете, это может быть связано с тем, что много контента плавает?

Любые предложения были бы очень признательны.

ответ

5

На вашем div.container удалите height: 100% и добавьте overflow: auto.

+0

Это почти так, после добавления 'min-height: 100%;' к вашему предложению это сработало! Любое предложение о получении 'min-height: 100%;' работает в IE <7, хотя? – Olical

+0

@ Wolfy87: 'min-height' не работает на IE <7. IE <7 рассматривает 'height' в том, как должен работать' min-height', поэтому для этих браузеров вы должны просто использовать 'height'. Однако вам нужно будет сделать некоторые обнаружения и/или взломы браузера, чтобы заставить его использовать «минимальную высоту» или «высоту» в зависимости от браузера. Учитывая, что IE6 теперь имеет долю рынка менее 3%, это может не стоить усилий. – Spudley

+0

@ Wolfy87: Я не рассматривал IE6, когда отвечал. Если вы пытаетесь заставить сайт работать в IE6, вы можете проверить [эту страницу] (http://www.astute.co.uk/buy-electronic-components.htm), это выглядит неправильно. Вы уверены, что вам нужна 'min-height: 100%'? Сайт выглядит хорошо для меня. – thirtydot

0

Попробуйте положить переполнение: скрыто; на контейнере, который вы хотите очистить от остальной части содержимого

+0

Но 'переполнения: скрытый;' будет делать то, что он говорит по олову, скрыть перелива содержание. Мне нужно, чтобы это было подтолкнуто этим контентом, я думал больше о чистом исправлении, но мне еще не удалось получить эту работу. – Olical

+0

переполнение: скрытое также может использоваться для очистки контента - работает аналогично .container: после {clear: both} http://www.quirksmode.org/css/clearing.html – kieran

+0

Я вижу, спасибо за это, даже если он работает сейчас, что действительно полезно. – Olical

1

Удалить «высота: 100%» из контейнера, «поплавок: левый» из нижнего колонтитула и добавить «clear: both» в нижний колонтитул. Это очистит все поплавки в контейнере, а цвет фона в контейнере будет отображаться вплоть до страницы, независимо от размера браузера.

0

Вы можете использовать inline-block к основному div, как: -

div.container{ 
    display:inline-block; 
} 
Смежные вопросы