CSS - 計算百分比減去動態圖像高度

Question

我有width: 100%的圖像，所以它的高度是動態的。 我想在它下面放置一個div，將所有的高度留在頁面底部。由於圖像高度未知，因此不可能使用height: calc(100% - ...)。

解決方案是什麼？

謝謝！

Answer 1

唯一的解決方案是使用JavaScript。

你必須得到圖像的高度，並根據圖像的高度設置div的高度。

首先，你必須使用獲得圖像的高度此：

var imgH = document.querySelector('my_img_selector').height; //pure JS 
var imgH = $('my_img_selector').outerHeight();    //jQuery 

比你要獲得頁面的高度：

var pageH = window.innerHeight; //pure JS - note that this may not work in all browsers 
var pageH = $(window).height(); //jQuery 

而不是你有你的div的高度設置爲填寫頁面的其餘部分

document.querySelector('my_div_selector').style.height = (pageH - imgH) + 'px'; //pure JS 
$('my_div_selector').css('height', (pageH - imgH) + 'px');       //jQuery 

田田！
希望我幫忙：D