Невозможно добавить маржу на главную, потому что фиксированный заголовок и рекламное объявление перемещаются

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

Поэтому я сделал позицию абсолютной с полем, и это сработало, но теперь я больше не могу центрировать контент на странице.

Это кодовая страница: https://codepen.io/defaydesigns/pen/ejxOBg

HTML

<header class="header"></header>
<div class="blurb"></div>
<main id="main" class="g1200">
<div class="ex1 g300"></div>
<div class="ex2 g900"></div>
</main>
<footer id="footer"></footer>

CSS

body {
margin: 0 auto;
color: #823300;
background-color:#fcf0de;
}
header {
background-color: #f36d21;
width: 100%;
height: 100px;
position: fixed;
}
.blurb {
width: 100%;
height: 50px;
background-color: #fff;
margin: 100px 0 0 0;
position: fixed;
}
main {
width: 1200px;
height: 1500px;
margin: 150px auto;
position: absolute;
z-index: -3
}
.ex1 {
background-color: black;
height: 100%;
}
.ex2 {
background-color: red;
height: 100%;
}

Позиционирование - это способ разметки страниц наихудший. Доступны гораздо более гибкие варианты.

Paulie_D 10.08.2018 17:13
0
1
40
1

Ответы 1

Я не уверен, что это даст полный ответ на вопрос, но надеюсь, что это приведет вас на правильный путь. Использование absolute для позиционирования опасно, вам следует посмотреть на что-то под названием Flexbox. Я прикрепил кодовый ключ, показывающий, что, по моему мнению, вы собираетесь делать. В противном случае он показывает, как вы все еще можете центрировать и переполнять элементы без использования абсолютного позиционирования. Ниже приведен код из codepen.

HTML:

<header class="header">
    <label>Header</label>
  </header>
  <div class="blurb">
    <label>Blurb</label>
  </div>
  <main id="main" class="g1200">
    <div class="ex1 g300">
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
    </div>
    <div class="ex2 g900">
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
      <div class="filler"></div>
    </div>
  </main>
  <footer id="footer">
    <label>Footer</label>
  </footer>

SCSS:

html {
  width: 100%;
  height: 100%;
  body {
    width: 100%;
    height: 100%;
    background-color: yellow;
    margin: 0;

    display: flex;
    flex-direction: column;

    .header {
      background-color: #f36d21;
      width: 100%;
      height: 100px;
    }

    .blurb {
      background-color: blue;
      width: 100%;
      height: 50px;
    }

    main {
      background-color: green;
      flex: 1;
      display: flex;
      flex-direction: row;
      margin: 25px;

      .ex1,
      .ex2 {
        overflow-y: auto;
        display: flex;
        flex-direction: column;

        .filler {
          background-color: cyan;
          width: 50px;
          height: 25px;
          margin: 10px 0;
          flex-shrink: 0;
        }
      }

      .ex1 {
        background-color: black;
        width: 290px;

        .filler {
          align-self: flex-start;
          &:nth-child(even) {
            align-self: flex-end;
          }
        }
      }

      .ex2 {
        background-color: red;
        flex: 1;
        margin-left: 25px;

        .filler {
          align-self: center;
        }
      }
    }

    footer {
      background-color: #f36d21;
      width: 100%;
      height: 100px;
    }
  }
}

Спасибо. Я знаком с flexbox, но стараюсь избегать его, потому что мне никогда не удается заставить его выглядеть и вести себя так, как я хочу. Что, по общему признанию, вероятно, потому что я где-то не понимаю. Я видел ваш пример, и он близок, но я хочу, чтобы <main> был установленной шириной, 1200 пикселей, но я хочу, чтобы он был по центру страницы и по-прежнему находился под полями и рекламным объявлением.

defaydesigns 10.08.2018 20:25

АХАХА! Я понял. Задайте для main значение justify-content: center и заголовок .blurb: align-items: flex-start. Это исправило это. Спасибо!

defaydesigns 10.08.2018 21:05

Другие вопросы по теме