CSS - Высота 100% больше, чем страница

Question

Итак, проблема в том, что у меня есть заголовок и содержимое страницы, я хочу дать заголовку заданную высоту 150 пикселей и предоставить все оставшееся пространство контейнера, поэтому я его установил на 100%. Но когда я это делаю, контейнер, содержащий содержимое заголовка и страницы, увеличивает его высоту.

Я не хочу использовать процент для заголовка, и я хочу, чтобы это работало на всех экранах (если возможно).

Вот мой код:

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

.container { 
    height: 100%; 
    width: 100%; 
    min-width: 1000px; 
    max-width: 100px; 
    margin: auto; 
} 

#header { 
    width: 100%; 
    min-height: 150px; 
    max-height: 150px; 

} 

.content { 
    height: 100%; 
} 

я также может включать в себя JQuery при необходимости

Answer 1

Вы можете использовать CSS3 calc function, здесь работает пример

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

.container { 
    height: 100%; 
    width: 100%; 
    min-width: 1000px; 
    max-width: 100px; 
    margin: auto; 
} 

#header { 
    width: 100%; 
    min-height: 150px; 
    max-height: 150px; 

} 

.content { 

    height: calc(100% - 150px); 
} 

и вы можете check поддержка браузера, JSBin Demo

Answer 2

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

Далее, я думаю, вы не знаете, легко знать высоту экрана, не так ли? Поэтому вы, вероятно, захотите получить это из jquery $ (window) .height()

, тогда вы задаете высоту .content (минус 150 пикселей). var theHeight = $ (window) .height(); $ (". Content"). Height (theHeight)