漂浮在页脚上的图像

-1

我在页面上有一个position:fixed页脚，以便它与页面一起滚动。在该页脚内部，我有一组五个图像。问题是，图像都挂在页脚的底部，所以底部不可见。没有余量或填充值已将它们移动到屏幕上的适当位置。有没有一个CSS命令我失踪或是他们的页脚奇怪？漂浮在页脚上的图像

这是页脚和其中的图像的CSS。谢谢你的帮助。

.footer { 
    background-color: rgba(0, 0, 0, 0.5); 
    height: 100px; 
    font-size:20px; 
    color:black; 
    font-family:Verdana; 
    padding-left: 8px; 
    width: 100%; 
    position:fixed; left:0px; bottom:100px; 
} 

.footer img{ 
    width: 59px; 
    height: 90px; 
    float: right; 
    display:inline; 
    padding: 1px; 
    margin-right: 50px; 
} 

<body> 
<div class="container"> 

<div class="header"></div> 

<div class="content"> 

    <div class="leftSidebar"> 
    <div align="center"> 
     <h3>Quick Stats</h3> 
    </div> 
    <p>Title: Exposure</p> 
    <p>Author: Kathy/Brendan Reichs</p> 
    <p>Series: Virals</p> 
    <p>Length: 436 pages</p> 
    <p>Publication Date: March 6, 2014 </p> 
    <p align="center"><a href="../Images/Barnes-and-Noble.png"><img src="../Images/Barnes-and-Noble.png" width="180" height="120" /></a><img src="../Images/amazon.png" width="180" height="98.18" style="z-index: -1;" /></p> 
    </div> 

<div class="rightSidebar"> 
    <div align="center"> 
     <h3>Kathy Reichs</h3> 
    </div> 
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br></p> 
</div> 

<div class="middleBar"> 
    <div class="bookTitle" align="center"> 
    <h1>Virals: Exposure</h1> 
    <h2 style="font-size:24px;">Kathy and Brendan Reichs</h2> 
    </div> 
    <div align="center"><img name="" src="../Exposure.jpg" width="315" height="456" alt="" /></div> 
</div> 
</div> 

<div class="footer"> 
    <div class="relatedBooks"> 
    <p>Related Books: ssssss </p> 
    </div> 
    <div class="footerImages"> 
    <img src="../Images/Swipe.jpg" width="1000" height="1500" /> 
    <img src="../Images/Code.jpg" width="59" height="90" /> 
    <img src="../Images/Shift.jpg" width="1000" height="1500" /> 
    <img src="../Images/Seizure.jpg" width="327" height="500" /> 
    <img src="../Images/Virals.jpg" width="327" height="500" /> 
    </div> 

</div> 

</div> 
</body>

来源

2014-03-07 user3390852

我不确定是什么问题。这里有什么问题？ http://jsbin.com/zajuhidi/2/edit – TimHayes

确实@TimHayes，你的[代码看起来很好]（http://jsfiddle.net/timmah/wdYLU/1/）。你在说什么时候屏幕宽度变得太窄，图像是否在下面浮动？ – Timmah

不，流入.footer的图像略低于页脚底部。我需要他们转移到页脚中间。 – user3390852