不同的瀏覽器顯示不同的頁面高度

我試圖設計一個單頁面網站（沒有垂直&水平滾動）。現在我的結構是：出現不同的瀏覽器顯示不同的頁面高度

container-->height: 100% 
    header-->height: 10% 
    main-content-->height: 80% 
    footer-->height: 10%

頁正是我想在Mozilla Firefox瀏覽器。但是，在Chrome黑色空間（約1-2px）出現在頁腳底部和瀏覽器底部之間。在Safari，一個垂直卷軸出現在右邊。

我正在使用Windows，並且沒有對任何元素應用任何邊距/填充{頂部或底部}。

編輯＃1

我還使用在main-content一個滑塊，我必須指定固定的高度一些div。

來源

2013-01-03 xan

爲什麼你在底部或滾動條上留下黑色空間的可能原因是瀏覽器使用百分比計算的方式。你可以找到解釋Here。

訣竅將定義#footer的容器的外部並設置

#footer{ position: absolute; bottom: 0; width: 100%; height: 9%; }

，還可以設置的#header的高度至9％，以允許在計算應變。

來源

2013-01-03 13:13:26 Harshad

歡迎來到網絡開發的世界。我建議從CSS重置開始，以確保一致的佈局。如果你不傾向於使用雅虎的工具，Google的CSS reset是一個很好的開始。

雅虎提供了很好的工具來促進：http://developer.yahoo.com/yui/reset/。

的基礎YUI重置CSS文件中刪除並中和HTML元素的不一致的默認樣式，建立跨A級瀏覽器的水平公平的競爭環境，並提供了良好的基礎您可以在其顯式聲明你的意圖。

<!-- Source File --> 
<link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">

來源

2013-01-03 11:15:48

我已經這樣做了。請參閱編輯的問題。我的代碼在這裏：http://jsfiddle.net/a7bqh/ – xan

-1

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, big, strike, strong, sub, sup, tt, var, 
b, u, i, center,table, tr, td, th, tbody, thead, tfooter, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, caption, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; border-spacing: 0; }

以此爲復位，它應該工作

來源

2013-01-03 11:18:47 Toping

你提到「主要內容」應該有80％的高度（與兩個10％很好地增加了值），但是在你的代碼中（無論是HTML還是CSS）都沒有實際指定80％。

什麼我可以看到「主要內容」是一堆嵌套的DIVs，所有的固定像素高度指定，所以我不知道這是如何工作。

首先加入height: 80%;到#main-content，去除嵌套在#main-content內的所有DIV的所有固定高度，然後找出接下來需要做的事情。

編輯：你提到你的代碼工作在Firefox，但我能想到的唯一的事情是，它在Firefox窗口的確切像素大小，並沒有其他的尺寸。如果您調整FireFox窗口大小，它看起來還好嗎？

來源

2013-01-03 11:39:15 djhayman

是的，它調整窗口時，它工作正常。我沒有在這裏的jsfiddle代碼中包含'javascript'來進行頁面校正，當我調整窗口的大小時，它會自動調整。此外，'固定'高度是我正在使用的滑塊。除非它們在'px'中具有固定高度，否則它將不起作用。也許，這就是原因。 – xan

不同的瀏覽器顯示不同的頁面高度

回答

相關問題