Question

我发现很多关于图像的例子并不能完全满足我的需要。我有一个简单的页脚，我用它来链接信息的版权/社交媒体，我希望它向右浮动，以便在屏幕上调整大小，它不会干扰左上角的导航。

/* footer */

footer {
   position:fixed;
   left:20px;
   bottom:20px;
   z-index:1;
   }
footer small {
   float:right;
   clear:both;
   margin:0 0 5px 0;

在html中：

<footer>
        <small>&copy; 2003-<script language="javascript" type="text/javascript">
                var today = new Date()
                var year = today.getFullYear()
                document.write(year)
                </script> Name of Site | <a href="Link to Site">The Site</a>
                          | <a href="Link to Site #2">Site #2</a>
        </small>
</footer>

它是一个非常小的设计，我试图保持它非常简单，所以当我尝试优化移动时，它将起作用。任何帮助表示赞赏。

Answer 1

只需添加right:0（或某个数字）即可将其拉到右侧。

footer {
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:1;
    right:0;
}

<强> jsFiddle example

Answer 2

您需要在页脚上设置宽度

DEMO

footer {
   position:fixed;
   left:20px;
   bottom:20px;
   z-index:1;
   width:100%; /*Added*/
   }
footer small {
   float:right;
   clear:both;
   margin:0 30px 5px 0;
}

Answer 3

我会尝试为页脚指定高度和宽度。还要确保给它一个显示类型的块。并非所有浏览器都将页脚视为块元素。

也许是这样的：

footer {
     position: fixed;
     display: block;
     right: 0;
     bottom: 0;
     height: 20px;
     width: 100px;
   }

Answer 4

我已经修改了一些代码来完成这项工作。

footer {
   position:fixed;
   left:0px;
   right: 0px;
   bottom:20px;
   z-index:1;
   text-align: right;
}
footer small {
   margin:0 20px 5px 0;
}

如何在右下方保留页脚div？

4 个答案: