2014-02-07 18 views
0

Я хочу, чтобы мой div.container был на 100% высотой, чтобы заполнить весь экран. Я пробовал несколько вещей, минимальную высоту, рост 100%, и все они разделены, но это просто не сработает.Css 100% высота просто не работает

Вот ссылка: http://jquery.colinvaneenige.nl/test/

Так .container с высотой 100%, все еще находясь в центре страницы! :)

Спасибо заранее,

+0

вас н. чтобы сделать 'html'' 'height: 100%' также .. –

+0

Я тоже пробовал, но это все равно не сработает! – user2894386

+0

Что не работает? если вы установили 'html', то' .container' также получит 100% экрана .. проверьте его с помощью firebug .. –

ответ

1

Вы можете сделать это position: absolute в сете top и bottom к 0:

#container { 
    width: 400px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: red; 
    margin: 0 auto; 
} 

Fiddle Demo 1

..or

body,html { 
    min-height: 100%; 
    height: 100%; 
} 

#container { 
    width: 400px; 
    height: 100%; 
    background: red; 
    margin: 0 auto; 
} 

+0

Это сделало это с одной стороны! благодаря! Теперь он вставлен влево и margin: 0 auto; не исправить эту идею? – user2894386

+0

Спасибо большое! Второй сделал именно то, что я хотел! – user2894386

+0

Да. Используйте left: 0 и right: 0. Тогда вы можете использовать margin: 0 auto. Смотрите мой обновленный ответ и Fiddle – TheYaXxE

-1

Невозможно, высота должна быть в пикселях:/ Только% для ширины: Вы можете сделать «минимальную высоту: 100 пикселей; "

+2

Это неправда. 1. Абсолютно возможно. 2. Вы можете использовать процент для ширины и высоты. –

+1

О, дорогая. Давайте быстро научим вас! [** ДЕМО ЗДЕСЬ **] (http://jsfiddle.net/Ruddy/5Rw74/) – Ruddy

0

Использование position: absolute и установить height: 100% вместо мин-высота.

.container { 
    position: absolute; 
    height: 100%; 
} 

Вы тогда придется использовать другие трюки CSS, чтобы получить его обратно к центру, например, скажем, ваша ширина контейнера 1000px :

.container { 
    width: 1000px; 
    left: 50%; 
    margin-left: -500px; /* negative half of the total with of the container */ 
    /* And code from above line */ 
    position: absolute; 
    height: 100%; 
} 
0

я только когда-либо был успешным путем создания таблицы с одной ячейкой, которая является высота 100%, а затем размещения DIV в том, что

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