2017-01-02 99 views
1

我目前正在一個網站上工作,而且我對這個頁腳不會停留在頁面底部感到很生氣。我已經檢查了同樣問題的其他主題,但沒有解決我的問題。無法在頁面底部設置頁腳

當我嘗試「相對」時,頁腳在「topbox」(這是我的頁眉)下面,而當我嘗試「絕對」時,它會在頁面中間。

<header> 
<div class="topbox"> 
<ul> 
<li><a class="active" href="#home">Home</a></li> 
<li><a href="#news">Services</a></li> 
<li><a href="#contact">Clients</a></li> 
    <li><a href="#contact">Contact</a></li> 
<li><a href="#about">About</a></li> 
</ul> 
</div> 
</header> 
<body> 
<div class="wrapper"> 
<div class="scrollbtn"><img src="Images/Scroll.png" style="width:40%"/>  
</div> 
<div class="bgbox"> 
<div class="box2"> 
<a> Lorem ipsum dolor sit amet, consectetur adipiscing elit... 
</a> 
</div> 
</div> 
<div id="footer">© 2017 "TEXT" All Rights Reserved</div> 
</div> 
</body> 

所以在這裏我們有頂盒這是標題,包裝,scrollbtn(鼠標的PIC指示需要滾動),bgbox(內容的背景),BOX2(內容)中,「lorep存有「是用戶滾動的內容並且非常長。這是我的問題,當您向下滾動頁面時,頁腳處於頁面底部,因此處於頁面中間。

這裏是CSS:

body, html { 
width:100%; 
height:100%; 
background-color: #060b0f; 
padding:0%; 
background-image: url('../images/background3.jpg'); 
background-size:cover; 
background-repeat: no-repeat; 
background-attachment: fixed; 
} 
/* HEADER */ 
.topbox { 
margin:0%; 
position: fixed; 
top:0%; 
left: 0%; 
width:100%; 
z-index:999; 
text-align:center; 
overflow: hidden; 
padding:0%; 
font-family:Impact; 
font-size:20px; 
} 
.topbox ul { 
    list-style-type: none; 
    margin: 0%; 
padding: 0%; 
overflow: hidden; 
background-color: #459cfe;} 

.topbox li { 
display: inline; 
} 
    .topbox li a { 
display: inline; 
color: black; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 
.topbox li a:hover:not(.active) { 
    background-color: #397fcd; 
} 
.active { 
    background-color: #fff; 
} 
/*HEADER FIN*/ 
.scrollbtn { 
position: absolute; 
bottom : 0%; 
left: 49%; 
} 

.hot { 
color:#4080e1; 
} 
.box2 { 
margin-top:0px; 
margin-left:10%; 
width : 70%; 
opacity:1; 
color: black; 
overflow: hidden; 
text-align:center; 
z-index:4; 

background-color:transparent; 


} 
.box2 a{ 
opacity:1; 
    } 
.bgbox { 
margin-top:0px; 
margin-left:8%; 
padding: 5%; 
padding-left: 8%; 
width : 70%; 
position: absolute; 
top : 10%; 
left: 0%; 
    background-color: rgba(255,255,255,0.5);  
overflow: hidden; 
text-align:center; 
z-index:3; 


} 
.bgbox:hover { 
background-color: rgba(255,255,255,0.9); 
} 

#footer { 
font-size:20px; 
cursor:pointer; 
color: black; 
text-align: center; 
width:100%; 
position:relative; 
left:0px; 
bottom:0px; 
background-color: #459cfe; 
} 
.wrapper { 
height:100%; 
} 

我已經嘗試了很多不同的東西(改變車身高度,包一切,相對的,絕對的,固定的,靜態的,...),我想不出其他的東西。我需要一個外部觀點。

+0

'topbox'必須位於body標籤內。我不是說這是一個修復,但只是指出這個問題,還是它的錯字 –

+0

不,這不是一個錯字,但它似乎並沒有問題,謝謝 –

回答

0

你想根據父元素的底部來定位您的頁腳對我的作品好。所以你必須給它一個位置:絕對

它會找到最近的父母不是「靜態」來定位自己相對於。所以目前它會坐在「身體」的底部。如果你想讓它坐在「.wrapper」的底部,給.wrapper一個「相對」的位置

編輯:好的我看到「bgbox」超出「標題」的問題。

1. 卸下所有「高100%」 - 這臺高度是一樣的視區(可見的)

2. 你「bgbox」目前絕對位置 - 所以它贏得了」不會被其他內容「推倒」,並且隨着它變得更大,它不會推動其他內容。我不確定你打算在這裏。你想讓「bgbox」成爲網頁常規內容的一部分嗎?那樣的話,把它定位:相對。 (我認爲你不希望其他內容佔據與bgbox相同的空間,因爲你的文本里面有文字,你的css和名字中的「bg」讓我覺得你可能從某處複製了一個模板,但是誤解了它的原意bgbox?)

注意:你在body標籤外面有一些HTML。我認爲你在描述頁面的HTML的一部分「頭部」和可能鏈接到資源之間混淆了,「頭部」只是一個DIV,其中包含了例如由語義信息使用的語義信息。搜索引擎。

+0

謝謝我'我會馬上嘗試它,但不,我沒有與「頭」混淆,這只是我把它放在外面的錯誤,它的工作,所以我喜歡它,因爲它看起來更乾淨我 –

+0

我試着通過添加「位置:相對「包裝和頁腳剛剛消失>< –

+0

包裝到位置:相對是可選的第二步。請參閱我的第一句話:將頁腳設置爲絕對位置: –

0

的這是正確的HTML代碼,所有的代碼不輸出正確的做法首先:

<body> 
<header> 
<div class="topbox"> 
<ul> 
<li><a class="active" href="#home">Home</a></li> 
<li><a href="#news">Services</a></li> 
<li><a href="#contact">Clients</a></li> 
    <li><a href="#contact">Contact</a></li> 
<li><a href="#about">About</a></li> 
</ul> 
</div> 
</header> 
<div class="wrapper"> 
<div class="scrollbtn"><img src="Images/Scroll.png" style="width:40%"/>  
</div> 
<div class="bgbox"> 
<div class="box2"> 
<a> Lorem ipsum dolor sit amet, consectetur adipiscing elit... 
</a> 
</div> 
</div> 
<div id="footer">© 2017 "TEXT" All Rights Reserved</div> 
</div> 
</body> 

header標籤必須body標籤

第二件事,我試圖與頁腳位置代碼中:絕對; 和

enter image description here

+0

它也適用於我,只要內容(Lorem ipsum。 ..)很短,但是如果我使它長一些,頁腳停留在中間:/ –

+0

我真的沒有,但是因爲這只是簡單的,所以可以使用@vadiser答案作爲源文件並從它開始 –

1

這裏是例子:

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
main { 
 
    padding-bottom: 30px; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
}
<body> 
 
    <header> 
 
    header 
 
    </header> 
 
    <main> 
 
    main 
 
    </main> 
 
    <footer> 
 
    footer 
 
    </footer> 
 
</body>

0

我不知道該怎麼給他附於這一點,但我想愛德華·d尋找答案! 我第一次嘗試刪除所有「身高:100%;」這並沒有立即解決問題,但顯然是我的錯誤,因爲它使「。body」和「.html 100%」的決議因此使所有其他「位置:絕對;」 divs根據它移動。 但是真正的問題是Bgbox也是絕對的。只要我做了「位置:相對;」「#footer」根據它自己定位。非常感謝Edward D和所有想要幫助的人!

+0

以下是如何「接受」對你最有幫助的答案,它會給予回答者的聲望,並幫助人們搜索類似的問題,找到有用的東西:http://stackoverflow.com/help/someone-answers。如果你仍然需要半透明背景尺寸的幫助來匹配完全不透明的文字,請發起一個新問題,我們將提供幫助:) –

+0

謝謝我的半透明背景作品像一個魅力(有趣的短語,因爲我不相信在魅力),但如果我需要幫助,我會來這裏!偉大的網站和偉大的人民。問題在30分鐘內回答,問題在幾個小時內解決。歡呼! –