2016-11-10 222 views
2

首先,我是用爲什麼我的頁腳在我的頁面頂部?

#copyright { 
position: fixed; 
bottom: 0; 
left: 0; 
right: 0; 
height: 50px 
} 

footer { 
position: fixed; 
bottom: 50px; 
left: 0; 
right: 0; 
} 

,直到我測試了更小的屏幕上我的網站,實現了頁腳是重疊的內容後就正常了。於是我試着設置htmlbody高度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> 
 
\t

編輯:

我的包裝使用了固定的位置,這樣我可以等分配top: 0bottom: 0和,因爲我用的是覆蓋整個屏幕的背景圖像,當我只使用min-heightmin-width背景圖像不覆蓋整個屏幕,而是留下一個白色的小邊框的頁面

+0

因爲'wrapper'及其所有內容都是'fixed'位置... – kukkuz

+0

下面是一些提示,以檢查是否有未來:爲什麼它留在這兒,不是嗎?所以,你可以考慮:'place','panel','frame',...所有這些都與'position'有關。所以,檢查所有'位置'來解決問題。祝你好運。 –

+0

嘗試我的,它的作品! –

回答

2

你不需要給兩個頁腳,也不需要給id="footer" 爲HTML5已經提供你的標籤,試試這個,如果你的作品

入住這裏這個演示Fiddle

HTML

<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> 
     <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> 
      <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> 

CSS

#wrapper { 
    display: block; 
    position: fixed; 
    text-align: center; 
    min-height: 100%; 
    width: 100%; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

#header p { 
    font-size: 2em; 
    margin: 0; 
} 

#header ul { 
    list-style-type: none; 
} 

#header ul li { 
    display: inline; 
    padding: 20px 20px; 
    font-size: 1.5em; 
    margin: 0 30px; 

} 
footer { 
    position: fixed; 
    margin-top: 2%; 
    height: 50 width: 100%; 
    text-align: center; 
    font-size: 0.8em; 
    bottom: 0; 
} 
footer ul { 
    list-style-type: none; 
} 
footer ul li { 
    display: inline; 
    margin: 0 15px; 
} 
0

這個工程

#wrapper { 
 
    display: block; 
 
    text-align: center; 
 
    min-height: 100%; 
 
    width: 100%; 
 
    margin-bottom: 10%// or some other value depending on your requirements 
 

 
} 
 
#header p { 
 
    font-size: 2em; 
 
    margin: 0; 
 
} 
 
#header ul { 
 
    list-style-type: none; 
 
} 
 
#header ul li { 
 
    display: inline; 
 
    padding: 20px 20px; 
 
    font-size: 1.5em; 
 
    margin: 0 30px; 
 
} 
 
#copyright { 
 
    position: relative; 
 
    height: 50px; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-size: 0.8em; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    margin-top: 15px; 
 
    height: 50 width: 100%; 
 
    text-align: center; 
 
    font-size: 0.8em; 
 
    bottom: 0; 
 
} 
 
#footer ul { 
 
    list-style-type: none; 
 
} 
 
#footer ul li { 
 
    display: inline; 
 
    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> 
 
    <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> 
 
    <li><a href="mailto:[email protected]">[email protected]</a> 
 
    </li> 
 
    </ul> 
 
</footer> 
 

 
<footer id="copyright"> 
 
    <p>© Pavel Design 2016 | Photography, design and website construction by Pavel Design 2016</p> 
 
</footer>

問題是因爲你設置的包裝位置fixed和頁腳位置relative。至於「重疊」的問題設置一個margin-bottom:10%包裝,這將確保包裝保持滾動,直到所有的包裝內容可見

+0

這現在導致我現在有腳註重疊內容的最初問題。而不是被困在頁面的頂部 – oneman

+0

@oneman修復了它 –

+0

它仍然有相同的問題,當我運行代碼段 – oneman

相關問題