html - CSS - 元素定位(绝对页眉、正文、固定页脚)

Question

我是 html 和 css 的新手，目前我遇到了两个烦人的问题。

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

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

1. 当我将页脚分成两半时，“开始”在左侧，“联系”在右侧，并将版权部分添加为 float:right 行中的所有其他内容都被推到一边.

我希望“开始”和“联系”从中间向两侧扩展，而版权部分位于最右侧。一切都在同一条线上。

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

https://jsfiddle.net/swvyrLnf/

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

Answer 1

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

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

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