CSS высота 100% проблема - PullRequest
Новая
       26

CSS высота 100% проблема

4 голосов
/ 30 июня 2011

Я знаю, что есть много вопросов о 100% -ной проблеме css. Тем не менее, я пытался следовать инструкциям там, и все же высота не на 100%, поэтому я решил снова задать вопрос.

Сайт, где вы можете увидеть проблему:

www.exendo.be

некоторые стили CSS: 

html {
    height: auto !important;
    margin: 0;
    min-height: 100%;
    padding: 0;
}

body {
    background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8;
    height: auto !important;
    margin: 0;
    min-height: 100%;
    padding: 0;
    width: 100%;
}

wrapper {
    height: auto !important;
    min-height: 100%;
    position: relative;
}
footer-container {
    background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40;
    height:146px;
}

Как вы можете видеть на сайте, нижний колонтитул находится слишком высоко на странице. Если я осматриваю страницу с помощью Firebug, я вижу, что html имеет высоту 100%, а тег body - нет. Проблема возникает как в Firefox, так и в IE.

Если бы кто-нибудь мог помочь, это было бы здорово!

Ответы [ 3 ]

5 голосов
/ 28 марта 2013

Количество людей, предложивших должность: абсолютная;bottom: 0;

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

Если вы можете назначить контейнеру фиксированную высоту, это идеально, поскольку высота: 100%будет работать с дочерним элементом.В случае, если содержимое слишком велико, вы можете поместить фон дочернего элемента с переполнением: видимым на родительском элементе, чтобы содержимое отображалось по-прежнему.Это помогает, но все равно может сломаться, если дочерний элемент не имеет такую ​​же ширину, как родительский.

Если это не сработает, я рекомендую использовать минимальную высоту в em или пикселях.Это позволит убедиться, что высота заполняет родительский элемент и увеличивается, если содержимое слишком длинное.Это лучше всего работает для комментариев клиентов на www.baka.ca

2 голосов
/ 30 июня 2011

Я думаю, что статья может вам помочь.

Согласно этой статье:

Назначьте "position: относительно" вашего div "контейнера" ​​- page, page-container или wrapper (я не уверен, к какому из трех, просто попробуйте), а затем "position: absolute; bottom: 0;» на ваш "контейнер нижнего колонтитула" div.

Надеюсь, это поможет вам.

0 голосов
/ 30 июня 2011

@ denappel;укажите html & body 100% height, поместите footer за пределы вашего main div wrapper и укажите нижнее поле в minus в соответствии с высотой нижнего колонтитула.

проверьте этот пример http://jsfiddle.net/sandeep/tCdPX/3/

это функционально называется stickyfooter

...