有沒有一個標準的方法,使我的網頁佔用整個屏幕沒有任何滾動條?它根據我使用的顯示器而變化,所以我想將其標準化。我唯一的想法是使所有的元素與百分比樣式,但我希望會有像screen.height
或什麼的財產。適合網頁到屏幕
感謝您的任何幫助。
有沒有一個標準的方法,使我的網頁佔用整個屏幕沒有任何滾動條?它根據我使用的顯示器而變化,所以我想將其標準化。我唯一的想法是使所有的元素與百分比樣式,但我希望會有像screen.height
或什麼的財產。適合網頁到屏幕
感謝您的任何幫助。
很多,很多方面......我個人最喜歡的是,你把所有的內部與下面的CSS巨型包裝:
#WrapAll {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}
這是有效一路回IE7(我認爲前但未經測試),並保證在任何基於標準的瀏覽器上呈現相同內容。
如果你需要滾動的東西,你可以設置內部項目的溢出值。它在窗口內滾動,無需滾動整個窗口。
如果你不想做position:absolute;
(有些人不舒服),你可以完成類似的事情:
#WrapAll {
width:100%;
height:100%;
overflow:hidden;
}
這似乎短,但它也是因爲更低保證雙向瀏覽器呈現邊距,邊界等。但無論哪種方式都可以在大多數情況下使用。
爲什麼在這種情況下使用包裝而不僅僅是身體?身體:溢出:隱藏。 當然你也需要從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
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>
如果有,您可能會看到它到處,而不是標準的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