Блог

Главная - Вопросы по программированию - CSS сделать высоту нижнего контейнера 100% от видимого пространства

CSS сделать высоту нижнего контейнера 100% от видимого пространства

#css #html #height

#css #HTML #высота

Вопрос:

http://jsfiddle.net/n8YsM/

Как мне сделать, чтобы идентификатор div синего цвета занимал оставшееся видимое пространство после div контейнера. Также в этом div не должно быть содержимого.

Ответ №1:

Измените css на: 

 #container{margin-left:auto;margin-right:auto;width:200px;}

html,body { height:100%; }

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}

#blue{width:100%;background:blue;height:100%;}

Вам также пришлось увеличить высоту страницы.

Ответ №2:

что-то вроде этого? http://jsbin.com/uxeda4

Комментарии:

1. Как насчет чего-то вроде хобби. ellisberner.com/contact.html ?

2. вы имеете в виду фон?

Ответ №3:

Используйте этот CSS: 

 /*add this:*/
html, body
{
    height: 100%;
}

.clear
{clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;

}
#blue
{width:100%;
background:blue;
/*and this*/height:100%;
}

Обновлен fiddle.

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

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