Высота нижнего колонтитула на основе размера экрана

Question

Я хотел бы создать нижний колонтитул, который относительно содержимого (так не фиксирован), но заполняет остальную часть экрана. Так, например, на моем более крупном мониторе нижний колонтитул начинался в том же месте, но заполнял 100 пикселей (например). На меньшем мониторе нужно всего лишь заполнить 75 пикселей. Я попытался использовать 100%, но это заставляет страницу быть действительно большой, и пользователь может прокручивать вниз и заполнять весь экран нижним колонтитулом. Есть ли способ получить немного более разумный размер, чтобы он просто заполнил нижнюю часть экрана? Мой текущий код заключается в следующем:

.footer 
{ 
    position:relative; //can't be fixed as content might overlap if extended  
    height:100%; 
    width:100%; //fill the entire screen horizontally 
    bottom:0px; 
    margin-top:345px; //used to make sure content doesn't overlap 
} 

Спасибо за любые идеи

Answer 1

Я изо всех сил с чем-то подобным и трюк я нашел, чтобы решить это, чтобы убедиться, чтобы установить тело и HTML в мин-высота: 100%, а затем имеют контент, а все остальные div равны 100%.

html { 
    min-height: 100%; 
} 
body { 
    margin: 0; 
    padding: 0; 
    min-height: 100%; 
} 
#content { 
    min-height: 100%; 
}