中心页脚固定在底部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

回答

相关问题