HTML5：粘性頁腳，標題和文章

我有一個簡單的頁面，頁眉，頁腳和文章標籤。 http://jsfiddle.net/6fmxv/HTML5：粘性頁腳，標題和文章

HTML：

<header> 
    <div class="social"> 
     <a class="facebook-logo" href="http://www.facebook.com/"> 
      <div id="facebook"></div> 
     </a> 
     <a class="youtube-logo" href="http://www.youtube.com/"> 
      <div id="youtube"></div> 
     </a> 
     <a class="twitter-logo" href="http://www.twitter.com/"> 
      <div id="twitter"></div> 
     </a> 
    </div> 
</header> 
<article> 
    <div>Question: Who are you?</div> 
</article> 
<footer> 
    <div> 
     <span></span> 
    <div> 
</footer>

CSS：

html, body { 
     height: 100%; 
     margin: 0; 
    } 

    header { 
     height: 24px; 
     background-color: rgb(19, 147, 107); 
    } 

     header .social { 
      padding-left: 19%; 
     } 

      header .social > a > div, footer > div > span { 
       margin: 0 12px; 
       float: left; 
       height: 71px; 
       width: 50px; 
       background-image: url(sprites.png); 
      } 

       header .social > a > div#facebook { 
        background-position: -116px -141px; 
       } 

       header .social > a > div#youtube { 
        background-position: -62px -141px; 
       } 

       header .social > a > div#twitter { 
        background-position: -9px -141px; 
       } 

    article { 
     width: 300px; 
     min-height: 100%; 
     margin: 0 auto; 
    } 


     article > div { 
      font-size: 3em; 
      padding-bottom: 150px; 
     } 

    footer { 
     background-color: black; 
     height: 150px; 
     position: relative; 
     margin-top: -150px; /* negative value of footer height */ 
     clear: both; 
    } 

     footer > div > span { 
      background-position: 147px -138px; 
      height: 133px; 
      width: 138px; 
     }

我試圖使它流體，使得：

頭枝頂部完成
底部頁腳完成
即使瀏覽器窗口調整大小，也沒有滾動條。 未完成
文章（一行）位於頁面中心。 未完成

請建議，如何使文本在中間，並在此方案中的網頁液（沒有垂直滾動條）。

來源

2013-06-01 Annie

你需要什麼樣的瀏覽器支持？如果你可以刪除IE9和下面，你可以使用Flexbox的：

http://jsfiddle.net/6fmxv/2/

有很多，你需要獲得跨瀏覽器支持不同的語法，但它很簡單。

我不會在這裏包括不同的語法，但你可以看看源代碼。

首先，你需要對身體能Flexbox的，然後告訴它使用垂直方向：

body { 
    height: 100%; 
    width: 100%; /* fixes bug in Firefox */ 
    margin: 0; 

    display: flex; 
    flex-direction: column; 
}

然後，你需要告訴條彎曲的大小佔用剩餘的空間：

article { 
    flex: 1; 
}

現在您只需將文章居中。您需要設置的文章是一個Flexbox的容器中，然後你可以添加以下聲明文章規則，以中心組在一字形方向（水平）和塊方向（垂直）：

article { 
    flex: 1; 

    display: flex;   
    align-items: center; 
    justify-content: center; 
}

您需要使文章成爲一個容器，如果你以body元素爲中心，它也會將頁眉和頁腳居中。

來源

2013-06-01 19:13:09

HTML5：粘性頁腳，標題和文章

回答

相關問題