CSS область контента нашего сайта прокручивается, когда это не должно

Question

Хорошо, проблема в том, что у меня есть заголовок, нижний колонтитул и div содержимого, и я хочу, чтобы div содержимого автоматически заполнял высоту браузера между верхним и нижним колонтитулами, чтобы нижний колонтитул оставался внизу страницы.или ниже длины содержимого.

при переходе на incard.com.au вы можете увидеть проблему на странице индекса, так как область содержимого меньше окна браузера, поэтому мы имеемДобавил высоту в div, чтобы решить проблему плавающего нижнего колонтитула.

Я исправил это с помощью jquery

$('#sitewidth').css({'height':(($(document).height())-320)+'px'});
        $('#contentbody').css({'height':(($(document).height())-320)+'px'});

Answer 1

Мне удалось исправить решение с помощью Javascript. Похоже, что для того, чтобы высота содержимого соответствовала всему экрану, мне нужно было сделать математическую вещь, где я убрал высоту нижнего колонтитула и заголовка от размер экрана браузера, а затем это дало мне минимальный размер моего содержимого тела. так как он отличается на экране каждого пользователя, это должна быть функция набора javascript.

Answer 2

Так что же должно произойти, если окно браузера меньше высоты div?

Вы можете установить высоту центрального делителя на 100 процентов. Например, сделайте содержимое div 100%, сделайте верх и низ фиксированной высоты. Это своего рода хак, но иногда я думаю, что это работает - 100% не будут сжимать фиксированную высоту сверху и снизу - оно «пытается» составить 100%.

Что мне неясно, так это то, что должно произойти, когда вы сделаете окно браузера меньше. Должны ли верхний и нижний колонтитулы оставаться приклеенными к верху и низу вашего браузера, в то время как область контента становится все меньше и меньше?

Answer 3

Единственная проблема, которую я вижу, состоит в том, что оранжевые границы на каждой стороне вашей области содержимого останавливаются на полпути вниз страницы, когда содержимое не достигает нижнего колонтитула.

Самый распространенный способ исправить этовыдать его, чтобы сделать эти оранжевые границы фоновым изображением и повторить его внутри .sitewidth

Answer 4

Удалите 'min-height: 700px' из # contentbody