Заставьте html нижний колонтитул занять остальную часть тела - PullRequest
Новая
       24

Заставьте html нижний колонтитул занять остальную часть тела

0 голосов
/ 30 марта 2012

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

Изображение: http://img1.uploadscreenshot.com/images/orig/3/8906151296-orig.png

Обратите внимание на светлую область под темной областью, темная область должна занимать все это.

Часть моего HTML-кода: 

<body>
....
<footer>
    <hr>
    <ul id="footerContainer">
        <li class="right">
            <ul>
                <li>
                    <a href="" class="family-filter">Filtro Fami....</a>
                </li>
            </ul>
        </li>
    </ul>
</footer>
<script>...</script>
</body></html>

CSS: 

....
#footerContainer {width: 90%; min-width: 525px; margin: 0 auto; position: relative;}
....

footer hr{ border: 0; height: 30px; background: url('../imgs/footer-top.png') repeat-x scroll; }
footer {
  background: url('../imgs/footer-bg.png') repeat scroll bottom;
  height: 100%;
  display: block;
  margin: 0 auto;
  padding: 0;
  overflow: auto; 
}
#footerContainer {margin: 0 auto; position: relative;}
#footerContainer li { display: inline;}
#footerContainer li .right {float: right;}
#footerContainer li a {}

Есть предложения?

Update1:

Вот что происходит: http://img1.uploadscreenshot.com/images/orig/3/8906391235-orig.png, когда я устанавливаю 

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

Update2:

http://awesomescreenshot.com/0382hf1ff

Zoomи на этой странице: line25.com/wp-content/uploads/2010/blog-design-coded/demo/… и проверьте область нижнего колонтитула, вот как она должна работать на моем макете.

Ответы [ 3 ]

2 голосов
/ 30 марта 2012

Здесь очень полезная демонстрация высоты 100%:

100% Высота Демо

Это может быть изменено в соответствии с вашими требованиями.

1 голос
/ 30 марта 2012

Демо: JsFiddle

Предоставление элемента height: 100% означает, что он занимает 100% ближайшего родителя, для которого определена высота.В этом случае вы не знаете высоту нижних колонтитулов, потому что высота содержимого является переменной.

Я не знаю остальную часть вашей HTML-структуры, но вы можете дать body белый фонцвет и содержание div темно-серый.

0 голосов
/ 30 марта 2012

Лучший способ сделать это - установить цвет фона элементов html и body на цвет вашего нижнего колонтитула.Затем установите цвет фона области содержимого на светло-серый. 

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}
#content {
    background-color: silver;
}
...