3

我正在尝试将页脚/导航固定在屏幕的右下角，因此当您向下滚动时，它始终可见，当您拉动浏览器的右下角使其变大时，它将保持固定在角落. 当您缩小浏览器时，我还希望它缩小。我想办法在左上角做到这一点，但不是在右边。

我努力了

 position:fixed;
 bottom:0;
 right:0:

但这似乎不起作用。我在页面边缘和我的图像（http://i.imgur.com/FZoaLd0.jpg）之间留下了一个神秘的空间（在 div 上做一个负边距不会抹去这个空间）我也不想要将其粘贴为背景图像，因为我最终想将其制作为图像映射。

抱歉，如果这令人困惑！在这方面我还是个新手。

    <div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>

宽度和高度是空间的罪魁祸首吗？如果是这样，我将如何解决？只需按照我需要的确切尺寸创建图像？

4

5 回答 5

7

首先，如果您不希望它在滚动时移动，您需要一个固定位置。

#footer {
    position:fixed;
    right:0;
    bottom:0;
    margin:0;
    padding:0;
    width:75%;
}
#footer img {width:100%;}

并清除边距：

html, body {
   margin:0;
   padding:0;
}

小心，position:fixed不幸的是，iOS 上的 safari 无法使用（iPhone、iPad ......）

你可以在这里看到一个演示。

编辑

另一种解决方案是将 img 放在页脚的背景中，如下例所示：

#footer {
    position:fixed;
    right:0;
    bottom:0;
    margin:0;
    width:75%;
    height:75%;
    background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right;
    background-size:100%;
}
于 2013-03-18T17:24:28.123 回答
3

绝对位置将随着滚动而移动。你需要的是positon:fixed;

#footer {
    position:fixed;
    bottom:0;
    right:0:
}
于 2013-03-18T17:16:33.273 回答
0

利用

position:fixed;

而不是absolute.

Fixed 将始终保持在窗口的右下角。
滚动时绝对变化。

于 2013-03-18T17:17:10.993 回答
0

你需要position: fixed;.

您可能还想尝试清除正文和 HTML 边距：

html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}

是否与任何将位置设置为的父容器一起使用position: relative;？

于 2013-03-18T17:16:18.697 回答
0

HTML：

<div class="class-name">
   <img src="images/image-name.png">
</div>

CSS：

div.class-name {
    position: fixed;
    margin-top: -50px;
    top: 100%;
    left: 100%;
    margin-left: -120px;
    z-index: 11000;
}
div.class-name img{
    width: 100px;
}

margin-top根据您的图像高度进行更改。

于 2016-12-06T02:45:31.453 回答