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

我有一张宽度为100%的图片，所以它的高度是动态的。 我想在它下面放一个div，它将占据页面底部的所有高度。无法使用

height:calc（100%-…）

，因为图像高度未知

解决办法是什么

---

谢谢

实现这一点的唯一解决方案是使用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

实现这一点的唯一解决方案是使用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

你能贴出你的标记吗！可以使用$（'my_div_selector'）.css（'height'）、'calc（100%-'+imgHeight+'）吗？不，我认为它不应该工作。任何需要计算的东西都很难在纯css.calc（）中执行函数应用于计算彼此之间的不同单位，例如%an px。此外，将DIV的高度设置为任何%都不起作用，因为身体高度是根据内容计算的。您必须使用像素来完成此操作。谢谢！是否可以使用$（'my_DIV_selector'）.css（'height'，'calc（100%-'+imghight+'））“？不，我认为它不应该工作。你需要计算的任何东西在纯CSS中都很难执行。calc（）函数应该用来计算彼此之间的不同单位，例如%an px。除此之外，DIV的高度设置为任何%都不起作用，因为体高是根据内容计算的。你必须使用像素来完成这项工作。”。