设置多个容器的高度为两个固定div之间的剩余高度
Set height of multiple containers to the remaining height between two fixed divs
我正在尝试让我的网站在移动设备上显示得很好。我有一个header，固定在顶部，也就是70px的高度。我有一个主菜单作为页脚，固定在底部，高度为 250px。
中间的内容是多张一张一张的图片。我希望 每张 图片正好占据 "header" 和 "footer" 之间的剩余高度。
我通常需要它在移动设备上工作，所以我不想将图像的高度设置为静态高度（即：在 320x480 设备上我可以计算高度为 480-70 -250 = 160px 但我需要它也能在 360x640px 的设备上工作。
使用 jQuery，将图像的高度设置为 window 的高度减去页眉和页脚的高度：
$('img').height($(window).height() - 70 - 250);
你应该查阅 CSS Calc https://css-tricks.com/a-couple-of-use-cases-for-calc/ and also viewport units https://css-tricks.com/the-lengths-of-css/
你可以这样做：
height: calc(100vh - 70px - 250px)
我正在尝试让我的网站在移动设备上显示得很好。我有一个header，固定在顶部，也就是70px的高度。我有一个主菜单作为页脚，固定在底部，高度为 250px。
中间的内容是多张一张一张的图片。我希望 每张 图片正好占据 "header" 和 "footer" 之间的剩余高度。
我通常需要它在移动设备上工作，所以我不想将图像的高度设置为静态高度（即：在 320x480 设备上我可以计算高度为 480-70 -250 = 160px 但我需要它也能在 360x640px 的设备上工作。
使用 jQuery，将图像的高度设置为 window 的高度减去页眉和页脚的高度：
$('img').height($(window).height() - 70 - 250);
你应该查阅 CSS Calc https://css-tricks.com/a-couple-of-use-cases-for-calc/ and also viewport units https://css-tricks.com/the-lengths-of-css/
你可以这样做：
height: calc(100vh - 70px - 250px)