如何像3列布局垂直对齐布局（只是垂直）

我想有一个垂直对齐的布局（移动）。它由一个应该在中间的主要部分（主要内容）组成。在这部分的顶部和底部，应该有像页面边缘200px的可用空间（是像顶部：200px）。但在这部分应该有一些文字，它不应该移动。如何像3列布局垂直对齐布局（只是垂直）

这幅画应该解释一下：

如果事情是不明确随便问！

代码：

我用 “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' t适合我的屏幕，它总是有点太大，所以我必须滚动... 你们有人有其他的想法或改进来解决这个问题吗？

来源

2016-08-23 dipsi

我认为你正在寻找的话是 “头” 和 “尾”。告诉我们你已经做了什么来解决这个问题，并解释你遇到的问题。这不是一个免费的代码写作服务 – Turnip

这已被“解决”了很多次 - 是否存在特定的错误或问题？如果是这样，你应该显示你的工作和问题。如果不是，我想我会建议把这个问题的范围过宽。 – chazsolo

看起来更像是一个请求而不是问题？ –

* { 
 
    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>

来源

2016-08-23 12:35:12

如何像3列布局垂直对齐布局（只是垂直）

回答

相关问题