中心頁腳固定在底部IE

我編碼爲一個大學項目的web界面，我一直在處理這個問題：中心頁腳固定在底部IE

我希望我的頁腳固定在底部，所以它是在地方無論哪個屏幕我使用的，或者如果我切換全屏模式

它工作在IE7以外的所有其他瀏覽器（我不支持以前的版本）

HTML

<div id="menu"> 
     <a href="information.html" rel="shadowbox;height=500;width=650"  title="INFORMATION" > 
      <img src="images/info.png" alt="information icon" /> 
     </a> 
     <a href="images/bricks_of_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES" > 
      <img src="images/image.png" alt="image icon" /> 
     </a> 
     <a href="music_player.swf" title="MUSIC" rel="shadowbox;height=400;width=600" > 
      <img src="images/music.png" alt="music icon" /> 
     </a> 
     <a href="#" title="MOVIES"><img src="images/television.png" alt="movies icon" /></a> 
     <a href="quotes.html" title="QUOTES" rel="shadowbox;height=300;width=650" > 
      <img src="images/male_user.png" alt="male user icon" /> 
     </a> 
     <a href="#" title="REFERENCES"> 
      <img src="images/search_globe.png" alt="search globe icon" /> 
     </a> 
    </div> 
    <a href="images/destiny_1.jpg" rel="shadowbox[gallery]" title="IMAGES"></a> 
    <a href="images/destiny_carma_jewell.jpg" rel="shadowbox[gallery]" title="IMAGES"></a> 
    <a href="images/destiny-joan-marie.jpg" rel="shadowbox[gallery]" title="IMAGES"></a> 
    <a href="images/pursuing_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES"></a> 

    <div class="clear"></div> 


    <div id="destiny"> 
     Discover more about the word <span class="strong">DESTINY </span>! Click one of the icon above! 
     (F11 Toggle Full/Standard screen) 
    </div> 

    <div id="footer"> 
     <ul id="breadcrumbs"> 
      <li>Disclaimer</li> 
      <li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li> 
      <li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li> 
      <li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li> 
     </ul> 
    </div> 
</div>

CSS：

#wrapper{ 
text-align:center; 
margin:0 auto; 
width:750px; 
height:430px; 
border:1px solid #fff; 
} 
#menu{ 
position:relative; 
margin:0 auto; 
top:350px; 
width:450px; 
height:60px; 
} 
#destiny{ 
position:relative; 
top:380px; 
color:#FFF; 
font-size:1.5em; 
font-weight:bold; 
border:1px solid #fff; 
} 
#breadcrumbs{ 
list-style:none; 
} 
#breadcrumbs li{ 
display:inline; 
color:#FFF; 
} 
#footer{ 
position:absolute; 
width:750px; 
height:60px; 
margin:0 auto; 
text-align:center; 
border:1px solid #fff; 
bottom:0; 
} 
.clear{ 
    clear:both; 
}

的白色邊框是有隻用於調試目的

應用在http://www.eezzyweb.com/destiny/

託管任何建議表示讚賞

來源

2010-05-05 Mirko

margin: auto;是什麼在IE7打破。你可以去周圍有

#footer { 
    width: 100%; 
    left: 0px; 
}

，因爲這樣的DIV延伸到全寬和UL將自動對齊到中間。
但也許這不是你想要的。

如果這不是一個可以接受的解決方案，網絡上的人說你可以通過將父母的文本對齊到中心來修復它 - 但這可能會影響佈局的其餘部分......你必須隨時使用它，但至少你知道發生了什麼壞事。

來源

2010-05-05 16:40:07 ANeves

麪包屑絕對拼寫有兩個b，因爲麪包屑中有'b'。 – quoo 2010-05-05 19:37:49

這個解決方案像一個魅力工作......謝謝;） – Mirko 2010-05-05 23:18:13

@Mirko，我很高興它幫助。 @quoo：感謝您的糾正。我真的很自以爲是 - http://www.ldoceonline.com/popup/popupmode.html?search_str=crumb – ANeves 2010-05-07 09:06:56

html, 
body { 
    height: 100%; 
} 
#wrapper { 
    position: relative; 
    height: auto !important; 
    height: 100%; 
    min-height: 100%; 
} 
#footer{ 
    left: 0; 
}

來源

2010-05-05 17:15:46 reisio

CSS：

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */ 
} 
#footer, #push { 
    height: 150px; /* #push must be the same height as #footer */ 
}

HTML：改編自http://ryanfait.com/sticky-footer/

<body> 
    <div id="wrapper"> 
     <!-- ALL non-footer content goes in this DIV. --> 

     <div id="push"></div> 
    </div> 
    <div id="footer"> 
     <ul id="breadcrumbs"> 
      <li>Disclaimer</li> 
      <li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li> 
      <li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li> 
      <li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li> 
     </ul> 
    </div> 
</body>

代碼我用幾個網站這種做法我已經開發了，包括我個人現場。它很棒！即使在IE6中（即使你說它不需要）。

來源

2010-05-05 19:32:32

不錯，我會試試。我不能爲兩個人投票，所以我選擇sr pt，因爲他的解決方案立即解決了我的問題。 – Mirko 2010-05-05 23:20:30

中心頁腳固定在底部IE

回答

相關問題