HTML - 固定頁眉和頁腳，水平居中佈局

Question

讓我們假設我有以下佈局（圖片1）。 我總是在頂部有一個頁眉，頁腳始終在底部。內容應該填充標題和頁腳之間的空白100％（圖2）。 此外，我想標題，內容和頁腳的內容水平居中，它只使用550px（圖片3）。

圖1：

！

圖2：

！

圖3：

！

想不出任何方式如何使用純CSS實現這一點。 我無法設法合併固定頁眉/頁腳與居中包裝。 任何想法，將不勝感激！謝謝

Answer 1

您需要添加一個指定元素寬度的內部元素。因此，像這樣的工作對於你想要什麼來實現：

HTML：

<div id="wrapper"> 
    <header id="page-header"> 
     <div class="inner"> 
      Centered 
     </div> 
    </header> 
    <div id="page-content"> 
     <div class="inner"> 
      Centered 
     </div> 
    </div> 
    <footer id="page-footer"> 
     <div class="inner"> 
      Centered 
     </div> 
    </footer> 
</div> 

CSS：

#page-header, 
#page-footer { 
    position: fixed; 
    width: 100%; 
    left: 0; 
    background: #ccc; 
} 

#page-header { 
    top: 0; 
    height: 100px; 
} 

#page-footer { 
    bottom: 0; 
    height: 75px; 
} 

#page-content { 
    padding: 100px 0 75px; 
} 

.inner { 
    width: 550px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    background: orange; 
} 

jsFiddle Demo

Answer 2

，如果我有你問題正確：

僞結構 - HTML

<header> 
<div class="container"> 
    HEADER CONTENT 
</div> 
</header> 
<section> 
<div class="container orange"> 
    content 
</div> 
</section> 
<footer> 
<div class="container"> 
    footer content 
</div> 
</footer> 

---

CSS上面的代碼

body {padding-top:50px;padding-bottom:100px;} 
header,footer {background:#D2D2D2;position:fixed;left:0;right:0;width:100%;} 
header {top:0;height:50px;} 
.container {width:550px;margin-left:auto;margin-right:auto;} 
.orange {background:orange;} 
footer {height:100px;bottom:0;} 

Answer 3

這其實很簡單：https://jsfiddle.net/xpp6a6rf/

你可能要編輯的東西是height和line-heightheader,footer和.inner種元素和.page

的max-width一定要使用box-sizing:border-box