根據窗口大小和平臺製作CSS位置屬性

我有一個頁腳在我的網頁底部運行。如果用戶正在桌面上查看該頁面，則頁腳需要在屏幕底部有position:fixed;。然而，根據我的UX屬，一個電話或其他小屏幕（寬度小於768px）上觀察時，頁腳需要是要麼根據窗口大小和平臺製作CSS位置屬性

固定在屏幕的底部，如果內容是短比屏幕的高度，或
絕對定位到頁（即，內容）的底部，如果該含量超過屏幕（高），並且因此不可見，直到滾動。這是爲了節省寶貴的屏幕房地產。

這可以在CSS內完成嗎？如果是這樣，怎麼樣？還是我需要依靠Javascript？我們假設這個頁面目前還沒有使用任何Javascript。

來源

2015-04-28 pgblu

首先，如果用戶在寬度超過768px的屏幕上查看網站，則需要始終修復頁腳;

這可以使用檢測屏幕的寬度並應用固定位置到頁腳這樣的媒體查詢來實現：

@media(min-width: 768px) { 
    footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    } 
}

爲了解決您需要申請我們稱之爲粘頁腳中的手機問題 。這可以很容易地使用類似flexbox

考慮下面的標記來完成：

<body class="Site"> 
    <header>…</header> 
    <main class="Site-content">…</main> 
    <footer>…</footer> 
</body>

的CSS將是（你可能需要的前綴屬性）

@media(max-width: 768px) { 
    .Site { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    } 

    .Site-content { 
    flex: 1 auto 0; 
    } 
}

來源

2015-04-28 13:47:08

這是用CSS簡單（如果您只是通過寬度檢測設備）。

首先開始與粘性頁腳模板（注意最上面一行是可選的位置）：

<div id="wrapper"> 
    <div class="table"> 
     <div class="top row"><div class="cell">header</div></div> 
     <div class="middle row"><div class="container cell">body</div></div> 
     <div class="bottom row"><div class="cell">footer</div></div> 
    </div> 
</div>

CSS

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

#wrapper {position:absolute; top:0; bottom:0; left:0; right:0;} 

.table {display:table; width:100%; height:100%;} 
.row {display:table-row;} 
.cell {display:table-cell;}

這將滿足您的頁腳的需求始終處於底部如果內容太大，可能會被推掉。我已經使用了display:table選擇，因爲它是兼容的回IE8，但還有許多其他的方式來獲得一個棘手的頁腳

現在添加媒體查詢定爲較大的寬度頁腳：

@media screen and (min-width: 768px) { 
    .bottom { 
     position:fixed; 
     bottom:0; 
     left:0; 
     right:0; 
    } 
}

Example Fiddle

來源

2015-04-28 13:47:19 Pete

根據窗口大小和平臺製作CSS位置屬性

回答

相關問題