Как я могу установить фиксированную верхнюю панель со 100% содержанием

Question

У меня сейчас что-то в этом роде ... Я хочу, чтобы контент составлял 100% страницы - 100 пикселей от верхней панели. Но это не сработает.

<style> 

#content{ 
    display: block; 
    height: 100%-100px; <!-- I need something to fix this, because it doesnt work --> 
} 

#topbar{ 
    height: 100px; 
    display: block; 
} 

</style> 

Answer 1

Каждый держит предлагая margin-top, однако, не дружат с высоты 100%.

Если вы хотите истинный фиксированный заголовок, попробовать что-то вроде этого

#content { 
    height: 100%; 
    padding-top: 100px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#topbar { 
    height: 100px; 
    position: fixed; 
} 

Update: Here is a link to a CodePen example

Это важный код из примера:

html, body { 
    height: 100%; 
} 

#topbar { 
    height: 100px; 
    width: 100%; 
    position: fixed; 
} 

#content { 
    height: 100%; 
    padding-top: 100px; 
    box-sizing: border-box; 
} 

Answer 2

Помещенный padding-top:

#content{ 
    display: block; 
    height: 100%; 
    padding-top: 100px; 
} 

http://jsfiddle.net/qbsJH/1/

Answer 3

Почему бы не дать ему нижнюю границу, как:

#content { 
    height: calc(100% - 100px); 
} 

Используйте это, рассчитаем общую высоту, что вам необходимость! :) И примените его тогда.

Для более: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 4

Вы, вероятно, можно добиться того же эффекта с ...

#content{ 
    display: block; 
    margin-top: 100px; 
}