頁面始終爲100％高度和100％寬度

如何使用100％寬度和100％高度的每個頁面構建具有不同頁面的單頁網站？我的第一個解決方案將是一個固定值，但我希望它縮放到屏幕的大小。這樣每個頁面都有屏幕的大小。請注意，它必須是「單頁」，因此頁面將在下面。頁面始終爲100％高度和100％寬度

感謝您的幫助！

來源

2014-06-16 Tbmluijten

目前還不清楚你在問什麼。你問是否有可能？是的。但是你真的想知道什麼？ – doctororange

「一頁」如何能成爲瀏覽器窗口高度的100％？ – Justinas

你想要一個頁面的多頁網站？你關心的是高度和寬度？ – Anthony

這是你需要的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    body { margin: 0; padding: 0; } 
    #parent { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } 
    #parent div { height: 100%; width: 100%; } 
    #parent div:nth-child(1) { background: red; } 
    #parent div:nth-child(2) { background: green; } 
    #parent div:nth-child(3) { background: blue; } 
    #parent div:nth-child(4) { background: orange; } 
    </style> 
</head> 
<body> 
    <div id="parent"> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
</body> 
</html>

的＃裏面的div父母都有100％的身高。即使您調整了屏幕大小。在Chrome，IE和Firefox上進行測試。

來源

2014-06-16 08:27:47

這是我非常想找的！非常感謝您的先生！ – Tbmluijten

沒問題:)你能標記它作爲接受答案通過點擊「檢查」標誌？會幫助其他人有同樣的問題。謝謝 –

當然，我會做到這一點;-) – Tbmluijten

取決於您想要如何構建它並調整它的大小。它是否有反應？如果是這樣，請確保使用支持它的框架。

而且，一開始是在你的CSS

body, html    {height: 100%;width: 100%;}

這下面將永遠填補你的屏幕爲100％，與身體。現在爲你的第二個問題。你想填寫每個頁面？因爲你在那裏失去了我。內容是可變的，因此無法始終適合100％的高度和寬度（想想智能手機，由於智能手機的像素寬度和高度有限，您必須有時滾動）

我建議您的網頁應爲，並將它們放在我的身體標籤中。然後每個部分都是一個不同的元素，你可以從你的菜單中調用它們（我假設你想在菜單中向下滾動），所以簡單地給它們一個ID，頁面將在JQuery或JavaScript的幫助下跳轉到它。

在此頁面上codecheck，看看我的意思是：http://www.jellyfishwebdesign.nl/Joost/index.php

來源

2014-06-16 07:37:08 Dorvalla

給height:100%到HTML，身體 &您頁容器。

來源

2014-06-16 07:37:59 demonofthemist

我覺得這個CSS的解決方案是不夠..

<body> 
    <section id="one"> 
    </section> 
    <section id="two"> 
    </section> 
    <section id="three"> 
    </section> 
</body>

而CSS：

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

#one { 
    min-height:100%; 
    position:relative; 
} 

#two { 
    min-height:100%; 
    position:relative; 
} 

#three { 
    min-height:100%; 
    position:relative; 
}

來源

2014-06-16 07:57:49 Patrick

頁面始終爲100％高度和100％寬度

回答

相關問題