適合網頁到屏幕

有沒有一個標準的方法，使我的網頁佔用整個屏幕沒有任何滾動條？它根據我使用的顯示器而變化，所以我想將其標準化。我唯一的想法是使所有的元素與百分比樣式，但我希望會有像screen.height或什麼的財產。適合網頁到屏幕

感謝您的任何幫助。

2013-02-27 Sam

如果有，您可能會看到它到處，而不是標準的960px佈局。 – adeneo 2013-02-27 20:16:50

如果包括移動屏幕，屏幕尺寸可以從160px到1200px +桌面屏幕。除非你想通過'overflow：hidden'隱藏內容，否則你的頁面上幾乎不會有內容，所以永遠不會有滾動條。 – Jrod 2013-02-27 20:19:09

你可能對響應式web設計感興趣（這裏有一些例子：http：// mediaqueri .ES /）。 – miku 2013-02-27 20:21:49

很多，很多方面......我個人最喜歡的是，你把所有的內部與下面的CSS巨型包裝：

#WrapAll { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    overflow:hidden; 
}

這是有效一路回IE7（我認爲前但未經測試），並保證在任何基於標準的瀏覽器上呈現相同內容。

如果你需要滾動的東西，你可以設置內部項目的溢出值。它在窗口內滾動，無需滾動整個窗口。

如果你不想做position:absolute;（有些人不舒服），你可以完成類似的事情：

#WrapAll { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
}

這似乎短，但它也是因爲更低保證雙向瀏覽器呈現邊距，邊界等。但無論哪種方式都可以在大多數情況下使用。

來源

2013-02-27 20:17:48 PlantTheIdea

爲什麼在這種情況下使用包裝而不僅僅是身體？身體：溢出：隱藏。當然你也需要從html和body中刪除任何填充/邊距。 – 2013-02-27 20:28:37

很好的一個，與絕對位置的包裝你的身體將有0的高度，所以你需要重新應用相同的CSS到你的身體，擊敗包裝。但即便如此，將其應用於身體的好處是什麼呢？因爲包裝是作爲你的身體使用的，所以沒有明顯的區別，所以通過分離CSS作業，你只會產生額外的工作和困惑。 – PlantTheIdea 2013-02-28 07:25:51

我會使用CSS，如果我是你，但jQuery不會讓你獲得這些值...

$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document

jQuery Doc on width

來源

2013-02-27 20:19:10 Joseph

CSS可能將是最適合這個。

<html> 
<head> 
<style> 
html, body { 
    height: 100%; 
} 
.fixedOverlay { 
    position:absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    overflow:hidden; 
} 

</head> 
<body> 
<div class="fixedOverlay"> 
hello world 
</div> 
</body> 
</html>

來源

2013-02-27 20:27:55 teewuane

適合網頁到屏幕

回答

相關問題