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