有一张在某些分辨率下不会显示的图片答案

【问题标题】：Have an image that won't show up on certain resolutions有一张在某些分辨率下不会显示的图片
【发布时间】：2013-12-19 22:13:38
【问题描述】：

这是我的网站：http://www.bkd.com/wealth-advisors/index-test.htm

我目前遇到的问题是“智慧财富”栏只会出现在某些分辨率上。无论如何我可以让这个出现在所有人身上吗？我需要它在每一页上都一样。略低于底部，但并非一直位于底部。

有人有什么建议吗？

这是我的 CSS：

.bottombar {
    position:fixed;
    margin-top: 800px;
    top:0px;
    left:0px;
    height:42px;
    width:1800px;
    z-index:100;
       }

这里是 HTML

<div style="position:absolute; top:-50; left:5; font-size:80px; z-index:4"><a   
href="/wealth-advisors/about-test.htm"><img src="/wealth-advisors/images/wisdom-
wealth.png" height="52" width="800" class="bottombar" ></a></div>

如果您需要我的其他任何东西，请告诉我。

谢谢！ -马西-

【问题讨论】：

标签： html css image footer

【解决方案1】：

这将解决您的问题：

.bottombar {
   bottom: 0;
   display: table;
   height: auto;
   position: absolute;
   width: 100%;
}

使用width: 100%、position: absolute 和display: table，您无需调整顶部、左侧或任何边距。

【讨论】：

谢谢@ProgramFOX 和@Jordana-morais！这很好用，有什么建议可以让它显示在 IE9 上吗？
把display: table改成display: block就可以在IE和其他浏览器上正常使用
嘿@Jordana-morais 我注意到你帮助的底部栏适用于我的分辨率，但是当我以更大或更小的分辨率查看它时，它并没有直接停留在底部随页面滚动。有什么建议吗？
问题似乎出在 #container 内的 <img> 和 <p> 标签上。试试这个调整：#container { float: left; height: 656px; position: relative; width: 100%; } 和 #text { background: url("/wealth-advisors/images/hp-copy.png") repeat scroll 0 0 rgba(0, 0, 0, 0); color: #FFFFFF; float: left; font-size: 16px; font-weight: normal; margin: 40px auto; padding: 10px; text-align: left; width: 610px; } 并删除 <img> 之前的 <p id="text">

【解决方案2】：

使用bottom:0; 我也可以尝试删除顶部边距。我会将宽度更改为 100%。还请记住，您在绝对的 div 中有图像并且图像是固定的。

【讨论】：