CSS-позиционирование элемента (абсолютный заголовок, тело, фиксированный нижний колонтитул)

Я довольно новичок в html и css, и в настоящее время застрял с двумя раздражающими проблемами.

  1. Если положение моего заголовка не является абсолютным, он не будет покрывать небольшую область выше и ниже себя. Но когда положение абсолютное, контейнер под ним частично уходит за заголовок.

Я хочу, чтобы мой заголовок покрывал ту же область, что и когда его позиция абсолютна, но я хочу, чтобы позиция контейнера автоматически была прямо под заголовком.

  1. Когда я разделяю нижний колонтитул пополам, для » Start «должен быть на левой стороне и» Contact » на правой стороне, и добавьте авторскую часть как поплавок:справа все остальное на линии будет отодвинуто в сторону.

Я хочу, чтобы» начало «и» контакт » расширялись от середины до сторон, в то время как авторская часть находится в крайнем правом углу. Все на одной линии.

Непрозрачность заголовка только для отображения проблемы.
Строка посередине служит для того, чтобы убедиться, что текст нижнего колонтитула находится посередине.
Я хочу избежать полосы прокрутки.

https://jsfiddle.net/swvyrLnf/

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

2 ответа

  1. Для заголовка: установите высоту заголовка в 100px. Затем установите верхнюю часть поля вашего тела в 100px.

    Для полосы прокрутки: это частично определяется высотой тела. Если вы хотите избежать полосы прокрутки, то вам, вероятно, потребуется изменить высоту тела от 100%.

    Для контактных/общих ссылок: я бы добавил заполнение влево / вправо, чтобы они отделялись друг от друга. Чтобы они растягивались дальше, можно изменить размер текста. Другой вариант-поместить их в контейнер, скажем, шириной 40%, и сделать весь контейнер связью.