CSS максимальная высота не работает, но высота же DIV работает

Question

В моем внешнем файле CSS,

#slider { 
    width:1200px; 
    height:800px; 
    margin:0 auto; 
} 

работает, но

#slider { 
    max-width:1200px; 
    max-height:800px; 
    margin:0 auto; 
} 

нет.
Это дает 0 высоты.
Я нахожусь на последнем браузере Chrome. Что я делаю неправильно?
Также -webkit-calc(100% - 100px) или calc(100% - 100px) не работает. Я предполагаю, что ни одно из свойств css2/css3 не работает.
Этот html-файл, который я использую, является частью сложного html с множеством css и javascript. Заблокирован ли css2 или что-то в другом файле?

ОБНОВЛЕНИЕ: Указание min-height работает и устанавливает высоту div для ее значения.

Answer 1

Вы должны применить height: 100%; в дополнение к max-height, который сделает height 100% от его родителей до его собственного max-height. Кроме того, он может занимать только место своего родителя. Таким образом, если ее первый ребенок в body тэгом, вы могли бы сделать что-то вроде:

JS Fiddle (с меньшим ширина/высота, например)

html, 
body { 
    height: 100%; 
    width: 100%; 
} 

#slider { 
    height: 100%; 
    max-width: 1200px; 
    max-height: 800px; 
    margin: 0 auto; 
} 

И использовать calc(), он работает точно так же. Это по отношению к его родителям высота/ширина. Таким образом, вы могли бы сделать что-то вроде:

JS Fiddle

html, 
body { 
    height: 100%; 
    width: 100%; 
} 

#slider { 
    max-width: 500px; 
    max-height: 500px; 
    margin: 0 auto; 
    height: calc(100% - 100px); 
    width: calc(100% - 100px); 
} 

Answer 2

Это зависит от того, что вы пытаетесь сделать. Но я полагаю, что в данный момент у вас есть нет содержание в этом элементе - если нет height, высота будет зависеть от содержимого. Попытайтесь поместить в него все больше контента/текста/изображений - оно вырастет до значения максимальной высоты, после чего появится полоса прокрутки.