定位在容器元素

佈局網頁我設計的是這樣的撥弄下一個div：http://jsfiddle.net/5sTub/定位在容器元素

編輯：注意：我沒有試圖讓一個棘手的註腳。我只是想把它放在頁面的底部。在回答之前請看小提琴

我想將頁腳定位在頁面的底部，但無法如您在上面的鏈接中看到的那樣。我嘗試了我在互聯網上找到的所有東西，包括設置容器元素的位置：相對;和頁腳的position:absolute;和bottom:0;，但似乎沒有任何工作，事實上，如果您將容器div添加到代碼並製作其position:relative;，並將以下css添加到頁腳：position:absolute; bottom: 0;，頁腳似乎在某處消失。自從很長一段時間以來，我一直對這個問題感到震驚，唯一的解決方案是設置我的標題，我的內容和頁腳的position:static;，這是dosent服務器的目的，並且破壞整個佈局，看起來很安靜。我想避免使用JavaScript。請提前幫助，謝謝。

編輯：什麼我需要說明： enter image description here

，其中藍色是頁腳，深藍色的是頭，淡藍色的是實際的內容和粉紅色的是一個棘手的股利。我不想讓頁腳變得粘滯，但是我希望它像在普通頁面上可以找到的那樣，唯一的問題是它不會留在頁面底部（請參閱fiddle）

來源

2012-09-03 Peeyush Kushwaha

在SO上看到。如果您只想將頁腳放在頁面的底部，就不要放棄它，並且它會位於內容的下方。我不明白你的問題是什麼。 – Bojangles

不，它的劑量低於內容，那是什麼問題 –

是否有助於http://jsfiddle.net/5sTub/1/

來源

2012-09-03 12:25:02 Sowmya

正是我所期待的。 –

**對於同類問題的人來說**：爲了在上面的小提琴中設置#wrapper百分比的高度，您必須先設置身體的高度！，最有可能的是，你也希望以百分比來設置身體的高度！ –

使用此

在你的CSS

html, body{height:100%} 


div#footer { 
     color: white; 
     background: rgba(68, 68, 68, 0.8); 
     width: 100%; 
     position:absolute; 
     bottom:0; 
    }

來源

2012-09-03 12:13:38 Carlos

正如我所說，我再次重申自己，我不是在尋找一個固定或粘性的頁腳。我只想把它放在頁面底部！「頁面底部」 –

含糊不清！每個人都在對你想做什麼進行最好的猜測，所以請解釋你想要更好的行爲。 – Bojangles

對不起，如果我沒有讓自己清楚。我現在增加了一個簡單的例子來幫助你們更好地理解我的問題。 –

添加這個CSS屬性可以使用粘頁腳方法這一點。閱讀本http://ryanfait.com/sticky-footer/

例如這樣寫：

HTML

<div class="container"></div> 

<div class="footer"></div>

CSS

body,html{ 
height:100%; 
} 
.container{ 
min-height:100%; 
} 
.footer{ 
height:40px; 
margin-top:-40px; 
}

來源

2012-09-03 12:15:07 sandeep

不是尋找一個粘性的頁腳，而是我想將它放在頁面底部 –

如果我的回答不是你想要的，那麼@rohit的回答是對的。 – sandeep

我不知道，如果你解決了這個與否，但我遇到了類似的問題和解決如下：我覺得這是最令人困惑的問題，我已經

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" " http://w3.org/TR/html4/loose.dtd"> 
<html> 
<style type="text/css" > 
div#mypage { 
    top:0; 
    background: purple; 
    color: white; 
} 
div#pageheader { 
    top:0; 
    left:0; 
    height: 20%; 
    position:absolute; 
    width:100%; 
    background: green; 
    color: white; 
} 
div#pagecontent { 
} 
div#contentleft { 
    display: inline-block; 
    background: blue; 
    position:absolute; 
    border-radius: 2px; 
    left:0%; 
    right: 15%; 
    width:15%; 
    height: 92.5%; 
    top: 5%; 
    color: white; 
} 
div#contentcenter { 
    display: inline-block; 
    background: yellow; 
    position:absolute; 
    border-radius: 2px; 
    left:15%; 
    right: 30%; 
    width:80%; 
    height: 92.5%; 
    top: 5%; 
    color: black; 
} 
div#contentright { 
    display: inline-block; 
    background: red; 
    position:absolute; 
    border-radius: 2px; 
    left:95%; 
    right: 5%; 
    width:5%; 
    height: 92.5%; 
    top: 5%; 
    color: white; 
} 
div#pagefooter { 
    color: white; 
    background: rgba(68, 68, 68, 0.8); 
    width: 100%; 
    height: 2.5%; 
    position:fixed; 
    left:0; 
    bottom:0; 
} 
</style> 
<head> 
<title>Multiple Div's</title> 
</head> 
<body bgcolor="#cccccc"> 
<div id="mypage"> 
    <div id="pageheader">HDR</div> 
    <div id="pagecontent">PAGE CONTENT 
     <div id="contentleft">LEFT</div> 
     <div id="contentcenter">CENTER</div> 
     <div id="contentright">RIGHT</div> 
    </div> 
    <div id="pagefooter">FOOTER</div> 
</div> 
</div> 
</body> 
</html>

來源

2015-04-14 05:35:34

您能否詳細說明您的答案，並添加關於您提供的解決方案的更多描述？ – abarisone

定位在容器元素

回答

相關問題