Нижний колонтитул веб-сайта перекрывает содержимое страницы на небольших экранах

Веб-сайт нашей компании отлично выглядит на большом экране, где он изначально был разработан (1920x1080, 21,5-дюймовый экран), однако когда он просматривается на экране меньшего размера (например, 15-дюймовом ноутбуке или мобильном телефоне), нижний колонтитул перекрывает содержимое, чтобы соответствовать нижней части окна браузера.

Я следовал учебнику по липкому нижнему колонтитулу, и, похоже, он не работает. Под нижним колонтитулом также есть дополнительное пустое пространство, из-за которого появляется y-scrollbar.


html css overlapping
person user1916856    schedule 19.12.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не используйте position:absolute; для содержания. использовать положение: относительное; вместо

<style type="text/css">
html, body
{
    height: 99%;
    background-color:Black;
}
.header
{
    width: 960px;
    height: 15%;
    background-color:Gray;
}
#Content
{
    min-height: 85%;
    width: 960px;
    background-color:Navy;
}
.con
{
    min-height:900px;
    width:960px;
    background-color:Aqua;
}

and

   <div class="header">
   </div>
   <div id="Content">
   <div class="con"></div>
   </div>
   <div class="header">
   </div>
person syed mohsin    schedule 19.12.2012
comment
Спасибо за помощь! Если я изменю позиционирование с абсолютного на относительное в элементах логотипа и верхней навигации, все выравнивание будет сброшено на всем сайте. - person user1916856; 20.12.2012