CSS對於Wordpress上的全頁面

我對CSS的知識非常新，而且非常有限。我正在使用Wordpress上的Salient主題構建網站。對於首頁，我正在嘗試構建着陸頁或某種「門戶」。理想情況下，無論寬度或高度如何，它都會具有響應性並適合瀏覽器。CSS對於Wordpress上的全頁面

我使用的WordPress的該頁面的自定義CSS，目前有以下幾種：

.at-content { 
position: fixed; 
background-color: #f7f6f5; 
height: 100%; 
width: 100%; 
overflow: scroll;}

我認爲問題的一部分是，我有它固定的，但如果我改變了位置的巨人當它變得太大時，我的瀏覽器底部會出現灰條。

目前它改變寬度時反應良好，但高度保持不變。

這裏是當前頁面：http://chairflyer.com

關於如何解決此問題的任何幫助將是非常讚賞。

來源

2016-08-23 KatherineK

您可以使用vh和vw來適應視口的尺寸（視口高度和視口寬度）。

.at-content { 
width: 100vw; 
height: 100vh; 
}

來源

2016-08-23 22:08:53

對於您現有的代碼庫，您希望使用視口單元和flexbox的組合。

#full{ 
    height: 100vh; // Sets height to full height of the viewport. 
    display: flex; // Turns on flexbox properties. 
    flex-direction: column; // Makes the flexbox layout in a column instead of a row. 
    justify-content: center; // Vertically centers your content. 
}

只要你可以關掉保證金，填充和寬度得到通過JavaScript在頁面加載時，每當視口被調整應用這會工作。

來源

2016-08-23 23:53:28 Ragdoll

謝謝！這有很大幫助。現在唯一的問題是，如果瀏覽器的高度太小，它會關閉內容的頂部。你知道如何解決@Ragdoll？ – KatherineK

看起來就是這樣，因爲你有'.at-content'' justify-content'設置爲'center'。我會使用基於高度的媒體查詢在屏幕上將其設置爲「flex-start」，這些屏幕太小而無法獲得良好的體驗，然後在視口足夠高時將其切換回「中心」。 – Ragdoll

CSS對於Wordpress上的全頁面

回答

相關問題