Вы можете попробовать расположить нижний колонтитул абсолютно относительно этого, это полезный трюк css для позиционирования элементов страницы и оставления их на месте, несмотря ни на что.
По сути, вы хотите обернуть нижний колонтитул в относительно позиционированный div, а затем сделать этот div шириной 100%, а затем полностью расположить нижний колонтитул внутри относительно позиционированного div, это должно сделать ваш нижний колонтитул точно в центреэкран, независимо от того, как изменяется размер экрана.
Поскольку эта концепция немного абстрактна для объяснения, я создал простой демонстрационный код, демонстрирующий то, что вы увидите, это розовое поле, расположенное точно в центресинее поле и независимо от того, как вы меняете сторону экрана, розовое поле всегда остается в центре экрана, вы можете увеличивать или уменьшать его, вы можете изменять размер окна, не имеет значения, надеюсь, это поможет.
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<title>absolutely relative positioning demo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div.wraper
{
height:200px;
width:100%;
position:relative;
background-color:blue
}
div.content
{
height:100px;
width:100px;
background-color:pink;
position:absolute;
left:50%;
top:50px;
margin-left:-50px
}
</style>
</head>
<body>
<div class="wraper">
<div class="content"></div>
</div>
</body>
</html>