html - 在实体化的页脚内移动上方的文本

Question

我有一个具体化的页脚，我将其高度设置为 35 像素。但问题是页脚内的文字消失了。每当我减小页脚的大小时，如何在它离开屏幕时向上移动它

  <footer style="position:fixed;bottom:0;left:0;width:100%;" class = "page-footer">

 <div class = "footer-copyright">

    <div class = "container">
       © 2016 Copyright Information
       <a class = "grey-text text-lighten-4 right" href = "#!">Designed & Developed by XYZ</a>
    </div>
 </div>

这给了我

现在，当我应用 CSS 来减小页脚的大小并将容器内的文本向上移动时，我得到了。

    footer {
       height: 35px;
    }
    footer .container {
       margin-bottom : 50px;
    }

文本已消失，当我尝试将该文本容器向上移动时它不起作用。

我该如何解决这个问题，哪里出错了。

注意:我已经尝试了所有建议的答案，但没有一个对我有用。

Answer 1

footer .container {
  margin-bottom: 50px;
}

这行不通，因为 .container 它位于 footer 内，高度固定。

为避免文本消失，您可以尝试使用相同的值向页脚添加行高:

footer {
  height: 35px;
  line-height: 35px;
}

如果你想在底部包含一些额外的空间，你可以添加一个填充:

footer {
  height: 35px;
  line-height: 35px;
  padding-bottom: 50px;
}

;)