CSS身高之謎

我試圖複製在路看到一個佈局：https://path.com/i/M2lzb CSS身高之謎

正如你可以在佈局CSS看到：

html, body { margin: 0; padding: 0; } 
html { min-height: 100%;position: relative; } 
body { }

不知何故，他們設法得到一個工作100％以上 - 高度像body上的行爲沒有固定html高度。我試圖複製它，但它只適用於我設置html { height: 100% }時，它會在佈局需要滾動時切斷背景（在小高度時它會被截斷）。

我已禁用javascript &它仍然在路徑網站上工作，所以它看起來像是100％css。

我試圖複製行爲沒有運氣（我沒有複製/粘貼所有路徑的CSS！）。

http://jsfiddle.net/J9fgc/2/

他們如何實現這樣的效果？

來源

2012-11-15 Olivier

這確實你鏈接的網站的伎倆：

.background { 
    background-position: 50% 50%; 
    background-size: cover; 
    height: 100%; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
}

來源

2012-11-15 11:13:01 LittleSweetSeas

如果我刪除了''.background' div'的'body'仍然具有像行爲100％的最小高度不上'html'設置明確的高度。所以對我來說，它不是來自這個（從'.dimmer'）。 – Olivier

你說得對，我誤解了你的問題。看起來身體正在圍繞元素.view-invites環繞，它被設置爲高度100％。我認爲這可能與這些屬性有關{display：table;身高：100％;}。無論如何，它像一個魅力:) – LittleSweetSeas

給予100％的高度，身體會做的工作。

body {height:100%;}

這樣簡單。

但我不確定你在說什麼，半透明的白色背景或海灘的背景圖像。無論如何，如果這是你不想要的，那麼請回複評論。

http://jsfiddle.net/DeepakKamat/J9fgc/3/

來源

2012-11-15 11:24:51

不適用於OSX上的Chrome 23。 – Olivier

回答

相關問題