一些 div 在页脚部分出现问题

Question

所有这些定位问题让我很头疼，所以我决定问问你；我已经看过关于这类东西的定位的博客，但是作为初学者，要找到确切的答案有点困难。

我有以下问题：

图中你会看到我有什么（我不能post，所以这里是SS的link：http://gyazo.com/bbea3f21abf77515288719296e496fcc），我要搬家: "copyright blablabla" 在页脚的底部使用页脚的所有宽度，我已经尝试了一切，如：

footer #copyright{
    font-size: 75%;
    top: 20em; /* just trying*/
    position: relative;
    text-align: center;
    width: 100%;

但是 div 不断触及其他元素（条款和条件、隐私和住宿与您在图片中看到的完全一样）。 "条款和条件等的代码是这样的：

footer li a{
    font-size: 90%;
    text-decoration:none; /* Quita toda decoracion del texto*/
    position: relative;
      /* este comando convierte en boton el reectangulo*/
    vertical-align: text-top;
        float: right;
         width: 30%;

谁能帮帮我？

PD：我添加我的 html 代码：

    <footer>


        <li><a href="#contactus">Contact us</a></li>
        <li><a href="#privacy">Privacy policy</a></li>
        <li><a href="#terms">Terms and conditions</a></li>
        <li><a href="#aboutus">About us</a></li>

        <a id="copyright">Copyright 2015 Pepito S.L., All Right Reserved.</a>

    </footer>
</body>

关于我的 CSS，是这个：

* {
    margin: 0;
    padding: 0;
    font-family: verdana;
}

footer {
    width: 100%;
    height: 12em;
    background-color: #363636;
}

footer li {
    list-style: none;
    text-transform: uppercase;
}

footer li a{
    font-size: 90%;
    text-decoration:none; /* Quita toda decoracion del texto*/
    position: relative;
      /* este comando convierte en boton el reectangulo*/
    vertical-align: text-top;
        float: right;
         width: 30%;


         /* Borde para ver el div*/
    color: #696969;
      border: 1px solid #f00;

}

footer a #copyright{
    font-size: 5%;
    position: absolute;
    text-align: center;
    bottom: 0;

/* Borde para ver el div*/
    color: #696969;
      border: 1px solid #f00;

 }

Answer 1

尝试关注页脚

footer {
    position: absolute; /* or fixed if you want */
    bottom: 0;
}

这会将其设置为页面底部，space 为 0 像素，因此直接位于底部。

如果您还想将某些东西相对放置在示例右边的位置并且元素的宽度未知，请记住此技术，这样您就不必计算它必须从左边算起多少，但是仅从右侧设置 space，例如 right: 25px;.

同时阅读并理解每个 position 属性（相对、绝对、静态、固定）之间的差异，这将对您有很大帮助！明白这一点后，我想升10级了！这帮了大忙，我可以优化我做过的所有事情并防止我过去遇到的任何问题。

编辑

至此题目编辑完毕，给出代码。我以为最上面的链接是页眉，但现在我明白了整个事情应该是页脚。

所以单独定位页脚不会有影响，所以 Mathieu David 的解决方案应该适合。

举个例子：为什么我总是应该提供尽可能多的信息和细节，也尽可能多地询问而不是自信，因为其他人不知道你实际上在尝试什么

Answer 2

您可能想要的是在页脚 div 中设置 position: relative 并将 position: absolute 放在包含版权的元素中。

<footer>
    ...
    <div class="copyright">Copyright</div>
</footer>

并在 css

footer{
    position: relative;
}

.copyright{
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

JSFidle

Answer 3

使用 position: absolute;（以及 relative 到 footer）。

footer {height: 130px; position: relative;}
footer #copyright {position: absolute; bottom: 0;}

https://jsfiddle.net/zkxjasf0/

一些 div 在页脚部分出现问题

Troubles in the footer part with some divs

css

html

footer