3列レイアウト（縦のみ）のようにレイアウトを縦に整列する方法

Question

縦型レイアウト（モバイル）にしたいと思います。それは真ん中にあるべき主要な部分（主な内容）から成っています。この部分の上部と下部には200pxの空きスペースがページの端（200pxのように上端）まで現れるはずです。しかし、この部分ではテキストがあるはずです。移動してはいけません。

この写真はそれを説明する必要があります。

何かが気軽に明確でない場合は！

コード：

私はそれが基本的なことだ、と私はこのようにそれを行う場合は、 "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> 

それをwon'私の画面に収まるように、それはちょっと大きすぎるので、スクロールする必要があります。 あなたの誰かがこれを解決するために他のアイデアや悪夢を持っていますか？

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>