CSS问题，隐藏页脚时响应图像大小调整为100%高度

我不是一个CSS向导，需要一些关于如何执行以下操作的帮助/建议

我使用引导做一个响应布局，需要一个2行布局。第一行有3列，第二行有一列

顶部第三列将有一个图像，第二行是一个水平滚动图像转盘

第二行（旋转木马）将在窗口事件中隐藏。当这种情况发生时，我们希望图像的大小和填充屏幕100%的高度

另一个标准是高度将始终为100%，并且不应出现溢出或滚动条

我已经搜索了很多示例或类似问题，主要发现了如何使用导航/标题+较低的内容div填充到100%的高度，但没有看到这种情况

实际上，我已经让它工作了，但我认为它有点笨重（参见JSFIDLE）

所以问题是，有没有一种方法可以像我在演示中那样，用纯CSS而不是JavaScript来调整图像高度，在演示中我们修改了元素样式？谢谢你的时间

内容1
内容2
用JS隐藏这个，图像会变大
身体{
高度：250px；
}
.集装箱{
身高：100%；
背景颜色：蓝色；
}
#第1行{
身高：95%；
最大高度：100%；
}
#第1排分区{
浮动：左；
}
#行1.max{
身高：100%；
最大高度：100%；
}
#第1行img{
身高：继承；
最大高度：继承；
}
#第2行{
高度：自动；
背景颜色：黄色；
}
.隐藏{
位置：绝对位置；
顶部：-9999px；
左：-9999px；
}
$（'input'）。在（'click'，函数（）{
风险值r1=$（“第1行”）；
风险值r2=$（“第2行”）；
if（r2.hasClass（“隐藏”））
{
r2.移除类（“隐藏”）；
r1.移除类（“最大”）；
}
其他的
{
r2.添加类（“隐藏”）；
r1.添加类别（“最大”）；
}
$（“输入”）.attr（'值'，$（“#行1”）.height（））；
});

您可以使用

切换类

，因此您的JS如下所示：

$('input').on('click', function () {   
    $('#row1').toggleClass('max');
    $('#row2').toggleClass('hide');

    $('input').attr('value', $('#row1').height());
});

---

示例：

您将身高设置为最大250，为什么？根据这种设置，它实际上是有效的。从容器的角度考虑，将容器视为具有固定高度的容器，当单击按钮时，它将获得100%的高度；在图片上。此外，你在做纯css，你唯一使用的JS是点击事件，这是正确的方式。忘记添加，你可能需要把最大高度：100%以及。但是仍然不确定你想要完成什么。。。

$('input').on('click', function () {   
    $('#row1').toggleClass('max');
    $('#row2').toggleClass('hide');

    $('input').attr('value', $('#row1').height());
});