Question

在我的代码中，页眉和blurb是固定的，页脚也是如此。我试图将主要内容（主要是）放在固定的标题和内容下，但是每次我尝试向其添加边距时，所有内容都遵循该边距。

所以我将位置定为绝对，并且可以工作，但是现在我不能再将内容置于页面中心。

这是codepen页面：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%;
}

Answer 1

我不确定这是否能完全回答问题，但希望它将使您走上正确的道路。使用绝对值进行定位很危险，您应该查看名为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;
    }
  }
}

无法固定页边距，因为标头和Blur动作固定

1 个答案: