CSS - 元素的定位（绝对页眉、正文、固定页脚）答案

【问题标题】：CSS - Positioning of element (Absolute header, body, fixed footer)CSS - 元素的定位（绝对页眉、正文、固定页脚）
【发布时间】：2016-10-05 18:08:23
【问题描述】：

我对 html 和 css 比较陌生，目前遇到两个烦人的问题。

除非我的标头位置是绝对的，否则它不会覆盖其上方和下方的一小块区域。但是当位置是绝对位置时，它下面的容器部分地位于标题后面。

我希望标题覆盖与绝对位置时相同的区域，但我希望容器的位置自动位于标题下方。

当我将页脚分成两半时，“开始”位于左侧，“联系人”位于右侧，并将版权部分添加为浮动：右行中的其他所有内容都被推到一边.

我希望“开始”和“联系”从中间扩展到两侧，而版权部分在最右边。一切都在同一行。

标题的不透明度只是为了显示问题。
中间的行是为了确保页脚的文本在中间。
我想避免滚动条。

https://jsfiddle.net/swvyrLnf/

header {
    width: 100%;
    opacity: 0.5;
    position: absolute;
    top: 0;
    background-color: black;
    color: white;
    text-align: center;
}

【问题讨论】：

标签： html css

【解决方案1】：

对于页眉：将页眉高度设置为 100 像素。然后将你的 body 的 margin-top 设置为 100px。

对于滚动条：这部分取决于主体的高度。如果你想避免滚动条，那么你可能需要将 body height 从 100% 更改。

对于联系人/共享链接：我会向左/右添加填充，以便它们彼此分开。要使它们伸展得更远，您可以更改文本的大小。另一种选择是将它们放在一个宽度为 40% 的容器中，并使整个容器成为一个链接。

【讨论】：

感谢您的回答！虽然我想避免将 px 添加到任何东西，这可能吗？因为滚动条直到我添加特定数量的 px 到任何东西时才会出现。此外，我想保持 100% 的页面高度以适应用户的窗口大小。最后一个答案 - 我的主要问题不是分开链接，而是让它们位于页面中间。右侧的文本将它们推向左侧。

【解决方案2】：

header 应该有overflow: hidden; 然后你就没事了。这是因为里面的项目有 margin 扩展了容器。

【讨论】：

当我添加“溢出：隐藏；”时没有发生任何事情。我是不是做错了什么？