如何像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列布局垂直對齊佈局（只是垂直）

回答

相關問題