是否可以使用CSS設置一個div的容器高度減去另一個div的高度？

說我有一個粘性的頁腳div「與id＃footer」在底部高度：500px漂浮在所有內容之上。是否可以使用CSS設置一個div的容器高度減去另一個div的高度？

我有一個div「與id #remaining」，我想佔據剩餘頁面的整個高度（但我不想「在」粘滯頁腳之下。是否有在CSS3中的方法來做沿着線的東西：

#remaining { 
height:100% - heightOf(#footer) // pseudocode 
}

我希望如果可能的話我能避免任何JavaScript

來源

2017-06-13 Rolando

我認爲你正在尋找'calc' – Prashank

什麼是應該發生的，如果'＃remaining'的內容大於頁面高度減去頁腳高度？請提供[**最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve），以便我們提供更簡潔的答案。 – hungerstar

＃remaining {height：calc（100％ - 500px）; }會給你一個百分比 – Gerard

下面是一個使用calc()和CSS variables（實驗功能）來完成你要尋找的一個例子：

<!DOCTYPE html> 
<html> 
<head> 

<style> 
html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 

html, body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
} 

:root { 
    --footer-height: 150px; 
} 

.body { 
    height: calc(100% - var(--footer-height)); 
    border: 1px solid black; 
} 
.footer { 
    height: var(--footer-height); 
    border: 1px solid black; 
} 
</style> 

</head> 
<body> 
    <div class="body"></div> 
    <div class="footer"></div> 
</body> 
</html>

我們創建了一個名爲--footer-height變量，並用它來設置的.footer高度：

.footer { 
    height: var(--footer-height);

然後，使用calc和--footer-height設置的.body高度：

.body { 
    height: calc(100% - var(--footer-height));

box-sizing: border-box允許我們添加邊框不增加的div的高度超出屏幕的100％（更多信息here）

來源

2017-06-13 20:42:08 Scott

仍然支持IE瀏覽器的不好支持http： //caniuse.com/#search=var – Gerard

您可以使用calc()：

height: calc(100vh - 500px);

雖然這可能會根據標記而改變。

body { 
 
    margin: 0; 
 
} 
 

 
main { 
 
    height: calc(100vh - 200px); 
 
    background-color: indianred; 
 
} 
 

 
footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: gold; 
 
}

<main></main> 
 
<footer></footer>

*相對於視的剩餘空間的高度設置可能會在較小的視口不可取。

來源

2017-06-13 20:28:11 hungerstar

是否可以使用CSS設置一個div的容器高度減去另一個div的高度？

回答

相關問題