Нижний колонтитул не прилипает ко дну, хотя он у меня закодирован
-
03-07-2019 - |
Вопрос
Я на время удалил нижний колонтитул, сайт должен был выйти в интернет.Так что ссылка тоже пропала.
Как видите (как в FF2, так и в IE7) нижний колонтитул находится внизу ЭКРАНА, а не внизу страницы (контента).
У меня есть это в моем коде:
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
и это в css:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px; /* height of the footer */
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height: 100%;
position: relative;
}
*#wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
margin: 0;
}
Или, если коротко:Я следовал инструкциям, данным здесь.
Решение
Итак, если #size находится внутри 100%, уберите отступы и добавьте следующее в #content
overflow:auto;
padding-bottom:30px;
тогда твоя ссылка у меня работает в ФФ
Другие советы
Вы недостаточно внимательно следовали инструкциям.Ключ к Планировка Мэтью
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
заключается в том, что контейнер имеет позицию: относительную, а нижний колонтитул имеет позицию: абсолютную.Это помещает одно внутри другого.Обратите внимание, что в контейнере есть место, зарезервированное для нижнего колонтитула, зарезервировав для поля отступы размер нижнего колонтитула.Таким образом, макет работает только тогда, когда высота нижнего колонтитула фиксирована.
Абсолютно позиционированный с элементом Bottom:0, он разместится внизу ближайшего относительно позиционированного родительского элемента.Если их нет, вместо них используется область просмотра, и это то, что происходит в вашем макете.
Ваш нижний колонтитул div не является дочерним элементом вашего div-обертки.
Как насчет Вот этот?
Переместите отступ от нижней части тела к нижней части #wrap.Из-за этого заполнения ваш нижний колонтитул всегда находится на расстоянии 30 пикселей от нижней части «страницы».Поместив его на #wrap, вы предотвратите попадание содержимого #wrap за нижний колонтитул.
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
*#wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
}
</style>
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Это сработало для меня.
ИМХО, проблему вызывает взлом IE star.Попробуйте изменить хаки IE с помощью:
*html #wrap {
...
}
На этом сайте есть довольно хорошая техника с демо: http://www.themaninblue.com/experiment/footerStickAlt/
Тут должно быть что-то еще, все описанные выше методы работают на разных сайтах, только не на моем.
Это исходный код моей страницы, ненужные вещи удалены (контент и прочее):
<body>
<div id="size"> javascript textsize modifier</div>
<div id="wrap">
<div id="top"> logoimage
<div id="menu">
<div id="menuwrapper">
<ul id="primary-nav">
<li> Homelink </li>
<li class="menuactive menuparent" class="over"> Link 2
<ul>
<li> Sublink 1 </li>
<!-- etcetera //-->
</ul>
</li>
<li class="menuparent" class="over"> Active Link 3
<ul>
<li> Sublink 1</li>
<!-- etcetera //-->
</ul>
</li>
</ul>
</div> <!-- end menuwrapper //-->
</div> <!-- end menu //-->
</div> <!-- end top //-->
<div id="content">
<div id="newssnippet"></div>
<div id="roundedright"> <!-- rounded corners //-->
<!-- 6 divs to create rounded corners //-->
<div id="right">Random main content</div>
<!-- 7 divs to create rounded corners //-->
</div> <!-- end rounded corners //-->
<div id="logo">Another logo</div>
<div id="roundedleft"> <!-- rounded corners again //-->
<!-- 6 divs to create rounded corners //-->
<div id="left">News content</div>
<!-- 7 divs to create rounded corners //-->
</div> <!-- end rounded corners //-->
</div> <!-- end content //-->
<div id="footer"></div>
</div><!-- end wrap //-->
</body>
Очевидно, я следую предписанной схеме из ссылка в первом посте.
Затем в CSS у меня есть:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: .8em;
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
min-height:100%;
}
*html #wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: transparent url(images/cms/footer.png) no-repeat bottom center;
padding: 0;
}
#footer p {
margin: 0;
padding: 0;
padding-top: .7em;
text-align: center;
}
#footer a {
text-decoration: none;
}
Это должно быть все необходимое...
Что мне не хватает?
Для записи:нижний колонтитул прилипает к нижней части страницы в правильном положении, если высота содержимого меньше 100%.Итак, если он не заполняет экран.
Нижний колонтитул находится где-то посередине, если контент занимает более 100% страницы, поэтому мне приходится прокручивать, чтобы увидеть все.