Question

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

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>

我应该将移动包装器放在同一级别并使用绝对位置吗？

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>

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

1 个答案: