Этот вопрос был опубликован несколько лет назад By Sally, но она решила его сама, и ее решение не работает для меня.Sticky Footer, плавающий на странице при изменении размера (заново)
Я прошел практически все соответствующие липкие страницы нижнего колонтитула на этом сайте и кучу из других мест, но я ничего не могу найти, отвечая на этот вопрос. Я уверен, что это связано с моим макетом, но я пробовал все, что я исследовал и могу думать, и это самое близкое, что я мог бы достигнуть липкого нижнего колонтитула, которым я доволен.
Вот HTML, с которым я работаю.
<body>
<div id="container">
<header class="main-header">
<a href="index.html"> <img src="logo3.png" alt="logo" /> </a>
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li><a href="SportsComplex.html">Sports Complex</a>
</li>
<li><a href="Contact.html">Contact Us</a>
</li>
</ul>
</header>
<body class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs">
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="quote">
<h6>""</h6>
<p> - </p>
</div>
</footer>
</div>
</body>
и CSS
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content: " ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover{
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
.footer .quote {
float: right;
color: rgb(56, 56, 56);
}
.footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
.footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
Вот мой JSfiddle
В моем нормальном полном экране три 300px х 300px квадратов в линию, и все хорошо, но когда окно размер уменьшается (как в моей скрипке) квадраты превращаются в две линии и вытесняются с экрана. Нижний колонтитул остается на месте в нижней части экрана до тех пор, пока вы не прокрутите его, он просто останется на месте и не будет следовать внизу страницы.
Я бы хотел, чтобы нижний колонтитул либо попал в нижнюю часть экрана, когда квадраты были вынуждены в две строки.
-или-
Пребывание в нижней части экрана и прокрутки с пользователем.
Любая помощь была бы очень признательна!
У вас есть два 'тело' ы - один внутри другого. Не уверен, что это имеет какое-либо отношение к вашей проблеме, но это неверно. – iamnotmaynard
Вы пытались установить 'position: fixed' на' .footer'? Или установите 'position: relative' в' # container'? Немного непонятно, о чем вы просите, но я думаю, что они могут делать то, что вы хотите. – iamnotmaynard
Я уже пробовал исправление, но он не работал должным образом. Однако после исправления проблемы с корпусом он теперь работает. Спасибо за помощь! –