html - 如何避免粘性元素的高度影响内容？

Question

我需要在底部有一个粘性元素，如果用户滚动到网站末尾，它会向上移动并显示页脚。所以我已经建立了它。但是粘性元素的高度会影响内容开头的空间。

.buttonArea{
   position: sticky;
   width: 100%;
   height: 50px;
   background-color: white;
   top: calc(100% - 50px); /*minus height of buttonArea*/
}

我的代码你可以在这里找到：http: //jsfiddle.net/kqojpcLr/

当然，我事先已经搜索过解决方案。我只在另一种类型中发现了同样的问题（例如 css-tricks.com上的 King Cobra ）。

我如何确保内容从顶部开始？在元素的开头和内容之间没有（灰色）空间？

标签： htmlcss

Answer 1

如果您需要快速修复，您可以为“内容”div 设置一个负的上边距。

.content{ width: 500px;
          margin: 0 auto;
          margin-top:-50px;
        }