CSS - 计算百分比减去动态图像高度

Question

我有width: 100%的图像，所以它的高度是动态的。 我想在它下面放置一个div，它将把所有高度留在页面底部。使用height: calc(100% - ... )是不可能的，因为图像高度未知。

解决方案是什么？

谢谢！

Answer 1

执行此操作的唯一解决方案是使用JavaScript。

你必须得到图像的高度，然后根据图像的高度设置div的高度。

首先，你需要使用它来获得图像的高度：

print "True"

比你必须获得页面高度：

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

而且你必须设置你的div的高度来填补页面的其余部分

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

多田！
希望我帮忙：D