定位問題

我有這個問題，不允許我絕對定位頁腳。我把它和它與像5px的保證金大量保證金的出現在IE在Firefox和完美的在Chrome ......我真的不知道爲什麼會這樣......這裏的HTML：定位問題

<p>In posuere dapibus mauris, et elementum magna rhoncus quis. Morbi ultricies malesuada magna, vel porta risus rhoncus a. Morbi aliquam facilisis dolor, scelerisque porttitor dui auctor id.</p> 
      </div><!-- /info --> 
      </div><!-- /info-design --> 
     </div><!-- /content --> 
     <div id="info-footer"></div><!-- /info-footer --> 
     <div id="footer"> 

     </div><!-- /footer --> 
    </div><!-- /wrapper -->

而CSS：

#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;} 

#content{margin:0 auto;width:1000px;} 

#info-design{ 
    -moz-border-radius: 0 0 5px 5px; 
    -webkit-border-radius: 0 0 5px 5px; 
    -opera-border-radius: 0 0 5px 5px; 
    -khtml-border-radius: 0 0 5px 5px; 
    filter:alpha(opacity=80); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    opacity: .8; 
    -moz-opacity: .8; 
    -khtml-opacity: .8; 
    background:#FFF; 
    border:1px double #000; 
    margin:0 0 10px 0; 
    position:absolute; 
    padding:10px 3px 3px 10px; 
    width:985px; 
    z-index:100; 
} 

#info{z-index:101;} 

#info-footer{background:url(../img/BaseSite.gif) no-repeat center bottom;height:158px;position:absolute;bottom:0px;z-index:99;} 

#footer{ 
    background:url('../img/cesped.jpg') repeat-x center bottom; 
    height:176px; 
    position:absolute; 
    width:100%; 
    z-index:98; 
    bottom:0px; 
}

我想要的圖像「cesped.jpg」出現只是底部：0像素;但它不會留在那裏= /我錯過了什麼或添加了一些我不應該有的東西？

編輯

我基本上希望讓頁腳是在「內容」最底層的div，但它不能被放置在該專區內，因爲它是一個固定的寬度，我想這圖像去重複x到整個瀏覽器（因此它被放置在內容之後，寬度=「100％」的包裝器之前;我試圖使包裝的位置是絕對的和相對的，但它仍然不會把它放在最底部...我已經試過它被「自然地」推下來，但它不會...

下面是它的方法HOULD樣子（看起來像在Chrome）： alt text

，然後這裏的IE和Firefox：

alt text

編輯2

我發現這個問題，出於某種原因，我的#wrapper沒有擴展到覆蓋整個瀏覽器高度，但只有它的一小部分，誰知道我是什麼失蹤？我說：

#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;min-height:100%;} 

#content{margin:0 auto;width:1000px;}

來源

2009-07-06 Tsundoku

要放置頁腳有關......什麼？我想「在<div id="wrapper">的絕對底部」？然後，您需要製作包裝position: relative;或position: absolute;。絕對定位的元素orient themselves on the closest parent具有relative,fixed或absolute的位置。從你的CSS看起來只有<html>或<body>。

此外，無論您info-footer和footer元素會被放置在最底層鋪在彼此的頂部。這是期望的效果嗎？

也許你可以發佈你想要它的樣子，看起來像什麼樣子？

真的有必要這樣做，而不是僅僅讓內容「自然」推下頁腳？

編輯：不知道如果我理解正確的話，但對於簡單repeating沿<body>底部的背景圖片？

body { background: url(image.jpg) repeat-x center bottom; }

來源

2009-07-06 04:24:02 deceze

響應於編輯2：position:absolute取元素出文檔流動的，從而它們的高度將不會在他們的父母來實施（或，父不會增長以容納它們）。這就是爲什麼增加高度會起作用的原因。但是，如果你絕對定位的元素比你設置的高度高，那麼同樣的事情會發生。

在上面，它看起來像div#info-design並不需要在所有絕對定位（從我可以告訴）。你可以刪除該聲明，給它一個margin-bottom等於div#footer的高度，並達到相同的效果，而不依賴於設置div#wrapper上的任意高度。

來源

2009-07-07 14:19:44 ajm

是否加邊距：50像素您#wrapper指定的工作？

來源

2009-07-07 14:28:04 sakabako

回答

相關問題