Во-первых, я использовалПочему мой нижний колонтитул в верхней части моей страницы?
#copyright {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px
}
footer {
position: fixed;
bottom: 50px;
left: 0;
right: 0;
}
который работал хорошо, пока я не испытал мой сайт на маленьком экране и понял, что колонтитулы были перекрывая содержание. Поэтому я попытался установить html и body высотой до 100%, а также установил мой wrapper до минимальной высоты 100% и разместил нижний колонтитул внизу, в надежде на более относительный нижний колонтитул. Но теперь он застрял наверху, что вызывает это?
#wrapper {
\t display: block;
\t position: fixed;
\t text-align: center;
\t min-height: 100%;
\t width: 100%;
\t top: 0;
\t bottom: 0;
\t left: 0;
\t right: 0;
}
#header p {
\t font-size: 2em;
\t margin: 0;
}
#header ul {
\t list-style-type: none;
}
#header ul li {
\t display: inline;
\t padding: 20px 20px;
\t font-size: 1.5em;
\t margin: 0 30px;
}
#copyright {
\t position: relative;
\t height: 50px;
\t width: 100%;
\t text-align: center;
\t font-size: 0.8em;
}
#footer {
\t position: relative;
\t margin-top: 15px;
\t height: 50px;
\t width: 100%;
\t text-align: center;
\t font-size: 0.8em;
}
#footer ul {
\t list-style-type: none;
}
#footer ul li {
\t display: inline;
\t margin: 0 15px;
}<div id="wrapper">
<div id="header">
<p>Pavel Design</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="contentwrapper">
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus imperdiet nulla scelerisque bibendum. Praesent eu tempus dolor, vel venenatis purus.</p>
</div>
</div>
</div>
<footer id="footer">
<ul>
\t <li><a href="index.html">Home</a></li>
\t <li><a href="about.html">About</a></li>
\t <li><a href="gallery.html">Gallery</a></li>
\t <li><a href="services.html">Services</a></li>
\t <li><a href="contact.html">Contact</a></li>
\t <li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<p>© Pavel Design 2016 | Photography, design and website construction by Pavel Design 2016</p>
</footer>
\tEDIT:
Моя обертка использует фиксированное положение, так что я могу назначить top: 0bottom: 0 и так далее, потому что я использую фоновое изображение, которое охватывает весь экран, когда я только используйте min-height и min-width фоновое изображение не покрывает весь экран, вместо этого оно оставляет небольшую белую рамку вокруг внешней стороны страницы
, потому что 'wrapper' и все его содержимое' fixed' положение ... – kukkuz
Вот несколько советов, чтобы проверить на будущее: почему он остаться здесь, а не там? Итак, вы можете думать о: 'place',' panel', 'frame', ... Все они относятся к' position'. Итак, проверьте все 'position', чтобы решить проблему. Удачи. –
попробуйте мой, он работает !! –