css - 頁腳不擴展

我很新的CSS，我仍然很難理解一些概念，特別是定位。無論如何，我的問題是，當我設置容器的position: relative;和我的頁腳position: absolute; bottom: 0;頁腳變小。它與我在放置這些代碼之前應該放置的容器具有相同的寬度。我這樣做是因爲我希望我的頁腳位於容器的最底部。css - 頁腳不擴展

下面是截圖：

enter image description here

栗色是頁腳。

在我的頁腳中，我不使用div，而是使用html元素<footer>。

我的CSS代碼：

div#container { 
    height: 100%; 
    width: 1000px; 
    margin: auto; 
    background-color: #C9C9C9; 
    position: relative; 
} 

footer { 
    background-color: #340B09; 
    height: 50px; 
    position: absolute; 
    bottom: 0; 
}

請幫助。

來源

2012-09-08 TheOnlyIdiot

在小提琴中添加您的代碼 – supersaiyan

您可以在頁腳上設置寬度：100％嗎？ – Eric

使用不靈活的單位（如px）時，要非常小心地設置高度。如果它包含的內容也是固定的（例如圖片），但它會與文本混淆。某些瀏覽器允許您覆蓋字體大小的選擇，並且最終會使文本溢出您的容器，從而使其無法讀取。 – cimmanon

我正確地通過聲明頁腳的寬度爲980px來解決它;當我嘗試1000px時，它變得比容器更寬，因爲經過研究，我發現mozilla和webkit不包含寬度的填充。

來源

2012-09-10 10:05:12 TheOnlyIdiot

檢查這一點，如果可以幫助您 https://developer.mozilla.org/samples/cssref/css-positioning.html

我也會鼓勵你安裝在瀏覽器中

也高於頁腳螢火蟲，增加一些DIV容器，給它一些高度。。因此頁腳將停留在底部。不要明確地使用定位...因爲你是新手。

給你自己一段時間後，你會在那裏對it..with CSS位置的頂部： - ）

來源

2012-09-08 15:06:24

添加寬度：1000像素;到您的頁腳

來源

2012-09-08 15:08:14 tsergium

bt其沒有必要。添加寬度儀式.. – supersaiyan

我試過了，但它變得比容器更寬 – TheOnlyIdiot

您正在使用;

footer { 
    background-color: #340B09; 
    height: 50px; 
    position: absolute; 
    bottom: 0; 
}

如果footer一些ID或類，應該像#footer或.footer CSS並沒有什麼問題，如果你使用的是HTML5元素footer定義。

如果要拉伸元素以填充容器，請使用width: 100%。如果頁腳位於container內，請將其添加到頁腳。否則，它會延伸到屏幕。

來源

2012-09-08 15:21:52

他使用html5元素'footer'。 –

ya。他可能是。謝謝@MikeCorcoran :) –

您是否有必要使用相對和絕對定位？我在問，因爲它有一個缺點，那就是頁面的佈局與所有不同尺寸的屏幕不一樣。

既然你想顯示頁腳在容器的底部，所以在這裏可以用這種方式完成。

<style type='text/css'> 

body{ 
    margin: 0px; 
    padding: 0px; 
    background-color: black; 
} 

#inbody{   /* main page */ 
    padding-top: 10px; 
    margin-top: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    padding-bottom: 10px; 
    height: 1170px; 
} 

#container{   /*container */ 
    padding: 10px;   
    margin-top: 10px; 
    margin-left: 30px; 
    margin-right: 30px;  
    height: 1130px; 
    background-color: orange;   
} 

#header{   /* header */ 
    margin-left: 168px; 
    height: 51px; 
} 

#midbody{   /* middle body */ 
    margin: 10px; 
    padding: 0px; 
    height: 999px; 
} 

#footer{   /* footer */ 
    padding: 10px; 
    height: 30px; 
    background-color: black; 
} 

</style>

此外，您可以更改每個部分的顏色以查看更改。還使用顯示網頁的HTML和CSS的檢查元素。同樣對於盒子模型概念，嘗試在檢查元素中進行度量。

來源

2012-09-08 15:39:50

css - 頁腳不擴展

回答

相關問題