javascript - 如何像 3 列布局一样垂直对齐布局(只是垂直)

Question

我想要一个垂直对齐的布局(移动)。它由一个主要部分(主要内容)组成，应该在中间。在这部分的顶部和底部应该有大约 200 像素的可用空间，直到页面边缘(是的，就像顶部:200 像素)。但是在这部分应该有一些文字，它不应该移动。

这张图应该可以解释:

如果有什么不清楚的，请随时提问!

代码:

我用“vh值”试过了

#container {
margin-top: 10vh;
margin-bottom: 10vh;
width: 100vw;
height: 80vh;
}

<div id="container"></div>

所以这是最基本的事情，如果我这样做:

#container {
width: 100vw;
height: 80vh;
}

#top {
width: 100vw;
height: 10vh;
}

#bottom {
width: 100vw;
height: 10vh;
}

<div id="top></div>
<div id="container"></div>
<div id="bottom"></div>

然后它就不适合我的屏幕了，它总是有点太大以至于我不得不滚动... 你们中有人有其他想法或改进方法来解决这个问题吗？

Answer 1

* {
  padding: 0;
  margin: 0;
}
body {
  min-height: 100vh;
  position: relative;
}
header,
footer {
  width: 100%;
  height: 100px;
  background-color: rgba(0, 0, 0, .8);
  position: fixed;
  color: #fff;
  font-size: 80px;
  text-align:center;
  z-index: 10;
}
header {
  top: 0;
}
footer {
  bottom: 0;
}
main {
  min-height: 100vh;
  padding: 100px 200px;
  position: absolute;
  top: 0;
  box-sizing: border-box;
}

<header>I'm a header</header>
<main>
  <p>I need your help ones again... So I want to have a (mobile) layout which is vertically aligned. It consists of a main part (with the main content) which should be in the middle. On the top and bottom of this part there should be like 200px of free space till the edge of the page (yeah like top: 200px). But in this parts there should be some text too & it shouldn´t move.
  </p>
  <br>
  <p>
    I need your help ones again... So I want to have a (mobile) layout which is vertically aligned. It consists of a main part (with the main content) which should be in the middle. On the top and bottom of this part there should be like 200px of free space till the edge of the page (yeah like top: 200px). But in this parts there should be some text too & it shouldn´t move.
  </p>
</main>
<footer>I'm a footer</footer>