Question

我正在尝试为css项目进行移动布局。我希望页眉和页脚保持固定在屏幕上，以便我可以滚动浏览它们之间的其余内容。事实证明这是成功的，除了我的文字都不会显示。

＆＃13;

body {
  width: 21em;
}

.header,
.footer,
.content {
  display: flex;
  flex-direction: row;
}

.header,
.footer {
  z-index: 2;
}

.header {
  position: fixed;
  width: 100%;
  height: 30%;
  background-color: red;
}

.content {
  position: absolute;
  width: 100%;
  height: 500%;
  clear: both;
  text-align: center;
}

.footer {
  position: fixed;
  width: 100%;
  height: 30%;
  background-color: green;
  margin-top: 120%;
}

＆＃13;

<div class='header'></div>
<div class='content'>
  <p>
    Despite the traumatic environment that typified his youth, he always knew his mother loved him deeply and always tried to protect him. To this wonderful woman, family meant everything and that unshaken commitment found a safe place within her young son’s
    soul. And, even though this humble new member had already endured such great danger and fear at an early age, his newly discovered faith immediately became a way of life which he now unhesitatingly shares with everyone he meets. He further affirmed
    that accepting the message taught by missionaries that helped him re-find his faith, repent, be baptized, and receive the gift of the Holy Ghost was the easiest “hard” thing he has ever done. For added emphasis, he reminded us that following Christ
    is not complicated so we just need
  </p>
</div>
<div class='footer'></div>

＆＃13;

Answer 1

您需要将margin-top添加到正文中，以便移动content，并将top: 0;添加到标题中，使其始终位于最顶层

只需调整保证金以满足您的需求

body {
  width: 21em;
  margin-top:20%;
}

.header,
.footer,
.content {
  display: flex;
  flex-direction: row;
}

.header,
.footer {
  z-index: 2;
}

.header {
  position: fixed;
  width: 100%;
  height: 30%;
  background-color: red;
  top: 0;
}

.content {
  position: absolute;
  width: 100%;
  height: 500%;
  clear: both;
  text-align: center;
}

.footer {
  position: fixed;
  width: 100%;
  height: 30%;
  background-color: green;
  margin-top: 120%;
}

<div class='header'></div>
<div class='content'>
  <p>
    Despite the traumatic environment that typified his youth, he always knew his mother loved him deeply and always tried to protect him. To this wonderful woman, family meant everything and that unshaken commitment found a safe place within her young son’s
    soul. And, even though this humble new member had already endured such great danger and fear at an early age, his newly discovered faith immediately became a way of life which he now unhesitatingly shares with everyone he meets. He further affirmed
    that accepting the message taught by missionaries that helped him re-find his faith, repent, be baptized, and receive the gift of the Holy Ghost was the easiest “hard” thing he has ever done. For added emphasis, he reminded us that following Christ
    is not complicated so we just need
  </p>
</div>
<div class='footer'></div>

文本不会显示在div中

1 个答案: