外部位置 css 来包装固定内容？

Question

我想开发一个移动框架来包装我的网站的内容（如果它是移动的），但我在 css 上遇到了问题。我放了一个包装器，但页眉和页脚位置固定，包装器似乎没有任何效果。

https://jsfiddle.net/ymo5xo4m/

header {
  position: fixed;
  top: 0;
  background: blue;
  width: 100%;
  padding: 5px;
}

content {
  margin-top: 30px;
  display: block;
}

footer {
  background: blue;
  color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 5px;
}

body {
  margin: 0;
}

#mobile-frame {
  border: 5px;
}

<div id='mobile-frame'>
  <header>header</header>
  <content>body content abc</content>
  <footer>copyright 2018</footer>
</div>

我应该把mobile-wrapper放在同一个级别并使用绝对位置吗？

Answer 1

您的方法存在问题：

• 为什么要将页眉和页脚包装在包装器中？你应该阅读position:fixed。它们在视口上占据绝对位置，而不会影响它们的滚动。如果您想要整个内容的边框，您应该修复包装器。

我会说这种方法是错误的。并且您不应该将您的固定元素包装在您放置正文内容的包装器中。因此，将您的页眉和页脚固定在包装器之外并将内容封装在它们之间的包装器中。

• 边框的简写语法不正确。您必须使用以下语法：border:5px solid black;（根据您的样式和颜色）。

如果这是你想要的，这里有一个演示：

header {
  position: fixed;
  top: 0;
  background: blue;
  width: 100%;
  padding: 5px;
}

content {
  margin-top: 30px;
  display: block;
}

footer {
  background: blue;
  color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 5px;
}

body {
  margin: 0;
}

#mobile-frame {
  height:100vh;
  z-index:1;
  border: 5px solid black;
}

<div id='mobile-frame'>
  <header>header</header>
  <content>body content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abccontent abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abcbody content abc</content>
  <footer>copyright 2018</footer>
</div>