5
У меня есть сайт с двумя нижними колонтитулами. Один очень хорошо себя ведет как «фиксированный» нижний колонтитул, который всегда отображается внизу страницы. Другой нижний колонтитул больше и должен быть ниже всего содержимого, только появляясь при прокрутке всего содержимого (если содержимое больше, чем на странице, оно не должно быть видимым, пока вы не перейдете к нижней части). Тем не менее, он должен быть липким, так что, если есть очень мало контента, он не поднимается и оставляет неудобный белый зазор.Нижний колонтитул, который должен быть ниже всего содержимого, но не исправлен
Прямо сейчас он отображается в середине страницы. :(Помогите?
html, body {
\t height: 100%;
\t width: 100%;
}
#PageContainer {
\t width: 100%;
\t height: 100%;
}
header {
\t width: 100%;
}
#Content {
\t position: relative;
\t background-image:url(Images/Golf%20Ball%20Texture.jpg);
\t background-repeat:repeat;
\t background-size: 150px auto;
\t width: 100%;
\t padding-left: 20px;
\t margin-left: -20px;
\t padding-right: 20px;
\t margin-right: -20px;
\t min-height: 90%;
}
footer {
\t width: 100%;
}
#MovingFooter {
\t clear: both;
\t position: absolute;
\t width: 100%;
\t background-color: #FFD600;
\t right: 0;
\t bottom: 0;
\t font-size: .9em;
}
#StickyFooter {
\t position: fixed;
\t bottom: 0;
\t width: 100%;
\t height: 50px;
\t background-color: #787878;
\t padding-left: 20px;
\t margin-left: -20px;
\t padding-right: 20px;
\t margin-right: -20px;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="Stylesheet" href="../style.css" type="text/css" />
<link rel="shortcut icon" href="Images/Logo%20Favicon.ico">
<title>Your Personality</title>
</head>
<div id="PageContainer">
<header>
</header>
<body>
<div id="Content">
</div> <!--id="Content"-->
<div id="MovingFooter">
<h2>Company Philosophy</h2>
<p>Footer content</p>
</div> <!--class="FooterThirds" -->
</div> <!-- class="ThirdsContainer" -->
</div> <!-- id="MovingFooter" -->
<div id="StickyFooter">
<p class="FancyFinePrint">© Copyright 2014 by <a href="http://www.geneticgolf.com">Company Name</a>. All Rights Reserved.</p>
<div id="FooterPartners">
<p class="FooterPartnerText">Proud Partners With:</p>
</div> <!-- id="FooterPartners" -->
</div> <!-- id="StickyFooter" -->
</div> <!-- id="PageContainer" -->
</body>
http://jsbin.com/kevoba/1/edit "посередине страницы" ?? Возможно, я не знаю, что означает * middle *? –
Здесь вы найдете: https://css-tricks.com/snippets/css/sticky-footer/ –
Это то, что вы хотите? https://jsfiddle.net/lmgonzalves/c5vL77oz/ – lmgonzalves