2
まず、私は小さな画面上で、私のサイトをテストし、フッターコンテンツが重複して実現するまでうまく働い 私のページの一番上にフッタがあるのはなぜですか？
#copyright {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px
}
footer {
position: fixed;
bottom: 50px;
left: 0;
right: 0;
}
100%に
htmlと
body高さを設定しても、私の
wrapperは高さ
100%をminに設定すると、より相対フッターを期待して、下にフッターを配置してみました。しかし今、それはトップに立ち往生しています、これは何を引き起こしていますか？
#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：
Iは画面全体を覆っている背景画像を使用するので、私は、これにtop: 0bottom: 0とを割り当てることができるように、私のラッパーは、固定された位置を使用する場合、Iのみ代わりに、ページ
'wrapper'とそのすべての内容は' fixed'位置しているので...ここで – kukkuz
は将来のためにチェックするためにいくつかのヒントです：なぜそれがありませんが、ここに滞在しますか？だから、あなたは 'place'、' panel'、 'frame'、ということについて考えることができます...それらはすべて' position'に関連しています。したがって、問題を解決するためにすべての 'position'をチェックしてください。がんばろう。 –
私の試して、それは動作します！ –