如何推倒身體並改變身高？

我想通過一些填充抵消一個身體標記。不過，我希望調整正文，使其不會落到瀏覽器窗口下方並引發滾動條。如何推倒身體並改變身高？

這裏是什麼，我試圖完成一個例子：http://jsfiddle.net/jM9Np/1/

HTML：

<body> </body>

CSS：

html, body { 
height: 100%; 
} 

body { 
margin-top: 20em; 
background-color: LemonChiffon; 
}

理想情況下，我想從身體的高度減去20em。無論如何，在沒有任何Javascript的情況下以及所有瀏覽器支持的方式（除Internet Explorer之外）都可以這樣做？謝謝。

來源

2012-09-13 user1669908

這要看情況。您可以使用邊界，f.ex：

html { 
    height: 100% 
} 

body { 
    border-top: 20em solid #fff; 
    background-color: LemonChiffon; 
}

http://jsfiddle.net/jM9Np/10/

但是，最好的方式恕我直言會增加身體和位置它絕對內的另一個DIV：

html, body { 
    height: 100% 
} 

div { 
    position: absolute; 
    top: 20em; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: LemonChiffon; 
}

http://jsfiddle.net/za4e3/

來源

2012-09-13 22:05:39 David

謝謝，我最終使用了第二塊代碼，因爲這對我來說似乎也是最理想的。 – user1669908

如果你的目標版本是主流瀏覽器，那麼你很幸運！這應該甚至工作在IE9（見full support table）：

html { 
height: 100%; 
} 

body { 
margin-top: 20em; 
height: calc(100% - 20em); 
background-color: LemonChiffon; 
}

http://jsfiddle.net/jM9Np/3/

來源

2012-09-13 21:51:04 bfavaretto

無效的屬性值... –

+和 - 運算符必須總是被空白包圍 –

哇，這是非常有用的。不幸的是，它似乎還是相當實驗性的（Opera不支持它呢？）。謝謝你的提示！ – user1669908

我會做類似

html{ 
height: 100%; 
background-color:black; 
} 
body { 
height:80%; 
margin-top: 20%; 
background-color: LemonChiffon; 
}

來源

2012-09-13 21:56:17 andres83

它不能是百分比。我需要準確的測量。 – user1669908

如何推倒身體並改變身高？

回答

相關問題