Question

我的页面上有一个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>

Answer 1

只需删除“height：100px;”即可。它将被设置为auto，如果你想在图像周围有更多的空间，那么使用像“padding：24px 0;”这样的东西。把它分开一点。没有理由声明页脚的高度。它会自动增长到图像的大小。我想这就是他们漂浮的原因。

图片浮出页脚

1 个答案: