сделать нижний колонтитул придерживаться нижней части страницы - PullRequest
0 голосов
/ 20 февраля 2011

У меня есть nghtmare с некоторым кодом на сайте, который я делаю, должно быть довольно просто, но это не так.

Я хочу, чтобы мой нижний колонтитул придерживался нижней части страницы, но чтобы весь контент был на первом месте (когда стоит больше, чем страница, если это имеет смысл)

Я смог сделать это в Safari, Chrom и Firefox, но главная проблема заключается в неожиданном сюрпризе, Internet Explorer.

Я нахожусь в точке, где она находится внизу, однако нижний колонтитул появляется над содержимым страницы, когда есть много (см. Вкладку «Кто мы»).

http://www.break -comms.com / index.html

Я был бы очень признателен за любую помощь в этом, так как это действительно начинает раздражать меня, возвращаясь назад к изменяющему форт коду в течение добрых нескольких часов.

Ниже приведен CSS, который сопровождает страницу, как я уже говорил, любая помощь по этому вопросу будет ДЕЙСТВИТЕЛЬНО оценена.

* {
    border:0px;
    margin:0px;
    padding:0px;
}

#html {
    height:100%;
    }


#banner {
    padding: 5px 0px 10px 0px;
}

#container {
    width:970px;
    margin:0 auto;
    height: 100%;
    position: relative;
}

#wrapper {
    position: relative;
    min-height: 100%;

}
#nav {
    margin-left:0px;
    text-indent:0px;
    text-align:center;
}

#menutab li {
    display:inline;
    list-style-type:none;
    font-family:Arial;
    font-size:18px;
    font-weight:100;
    text-align:center;


}

#menutab a {
    color:#9ea3ab;
    padding:5px 32px 5px 32px;
    text-decoration:none;
    text-align:center;
}

#menutab b {
    color:#9ea3ab;
    padding:5px 0px 5px 0px;
    text-decoration:none;
    text-align:center;
}


#menutab a:hover {
    color:#28957f;
}

#social .socialImage{float:right;

}

.divFloat {
float:right;
padding:0px 5px 0pc 0px;
}

.clear {
clear:both;
}

#social {
    background:transparent;
}

#footer {
    Position:fixed;
    bottom:0;
    width:970px;
    height:45px;
    background-image:url(images/footer.gif); width:970px; height:45px;
}



#footermenu .footermenu{float:right;

}

#footermenu li {
    display:inline;
    font-family:Arial;
    list-style-type:none;
    font-size:16pt;
}

#footermenu a {
    color:#9ea3ab;
    font-family:Arial;
    padding:0px 5px 0px 0px;
    text-decoration:none;
    text-align:right;

}

#footermenu a:hover {
    color:#28957f;
}

.clearfooter {
    height:45px;
    clear:both;
    }
#address {
    color:#28957f;
    font-family:Arial;
    font-size:16px;
    text-indent:5px;
}

#address2 {
    color:#9ea3ab;
    font-family:Arial;
    font-size:14px;
    text-indent:5px;
}

#contentbackground {
    background-image:url("images/homebackgroundimage.gif"); width:970px; height:400px;
}

#contentbackgroundcontact {
    background-image:url("images/contactbackgroundimage.gif"); width:970px; height:330px;
}

#contentbackgroundyouth {
    background-image:url("images/youthbackgroundimage.gif"); width:970px; height:350px;
}

#contectbackgroundwhoweare {
    background-image:url("images/whowearebackgroundimage.gif"); width:970px; height:700px;
}

#contentbackgroundmusic {
    background-image:url("images/musicbackgroundimage.gif"); width:970px; height:360px;
}

#contentbackgroundbrand {
    background-image:url("images/brandbackgroundimage.gif"); width:970px; height:500px;
}

#content {
    color:#9ea3ab;
    font-family:Arial;
    font-size:14px;
    padding:5px 30px 5px 50px;
    text-decoration:none;
    text-align:top;
}

#content2 {
    color:#9ea3ab;
    font-family:Arial;
    font-size:14px;
    padding:5px 30px 5px 70px;
    text-decoration:none;
    text-align:top;
}


#contentcontact {
    color:#9ea3ab;
    font-family:Arial;
    font-size:16px;
    padding:5px 30px 5px 50px;
    text-decoration:none;
    text-align:top;
}


h1 {
    color:#9ea3ab;
    font-family:Arial;
    font-size:16px;
    padding:5px 30px 5px 35px;
    text-decoration:none;
    text-align:top;
}   





body {
    height: 100%;
    background-image:url("images/denimbackground.gif"); repeat;
}

1 Ответ

2 голосов
/ 20 февраля 2011

Работает у меня, если я уберу позицию: абсолютная в директиве #footer CSS.
Включая в IE.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...