将多个容器的高度设置为两个固定div之间的剩余高度(Set height of multiple containers to the remaining height between two fixed divs)

我试图让我的网站在移动设备上很好地显示。 我有一个固定在顶部的标题，高度为70px。 我有一个主菜单作为页脚，固定在底部，高度为250px。

其间的内容是一个接一个的多张图片。 我希望每张图片都能正好占据“标题”和“页脚”之间的剩余高度。

我需要这一般在移动设备上工作，所以我不想将图像的高度设置为静态高度（即：在320x480设备上我可以计算出高度为480-70-250 = 160px但是我需要它也适用于360x640px的设备。

I'm trying to get my site to display nicely on mobile devices. I have a header, fixed to the top, that is 70px height. I have a main menu as the footer, fixed to the bottom with 250px height.

The content in between is multiple pictures one after the other. I would like each picture to take up exactly the remaining height between the "header" and the "footer".

I need this to work on mobile devices in general, so I don't want to set the height of the image to a static height (ie: on a 320x480 device I could calculate the height to be 480-70-250 = 160px but I need it to also work on a device that's 360x640px).

最满意答案

你应该查看CSS Calc https://css-tricks.com/a-couple-of-use-cases-for-calc/以及视口单元https://css-tricks.com/the-lengths-of- CSS /

你可以这样做：

height: calc(100vh - 70px - 250px)

You should look up 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/

You could do something like:

height: calc(100vh - 70px - 250px)将多个容器的高度设置为两个固定div之间的剩余高度(Set height of multiple containers to the remaining height between two fixed divs)

我试图让我的网站在移动设备上很好地显示。 我有一个固定在顶部的标题，高度为70px。 我有一个主菜单作为页脚，固定在底部，高度为250px。

其间的内容是一个接一个的多张图片。 我希望每张图片都能正好占据“标题”和“页脚”之间的剩余高度。

我需要这一般在移动设备上工作，所以我不想将图像的高度设置为静态高度（即：在320x480设备上我可以计算出高度为480-70-250 = 160px但是我需要它也适用于360x640px的设备。

I'm trying to get my site to display nicely on mobile devices. I have a header, fixed to the top, that is 70px height. I have a main menu as the footer, fixed to the bottom with 250px height.

The content in between is multiple pictures one after the other. I would like each picture to take up exactly the remaining height between the "header" and the "footer".

I need this to work on mobile devices in general, so I don't want to set the height of the image to a static height (ie: on a 320x480 device I could calculate the height to be 480-70-250 = 160px but I need it to also work on a device that's 360x640px).

最满意答案

你应该查看CSS Calc https://css-tricks.com/a-couple-of-use-cases-for-calc/以及视口单元https://css-tricks.com/the-lengths-of- CSS /

你可以这样做：

height: calc(100vh - 70px - 250px)

You should look up 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/

You could do something like:

height: calc(100vh - 70px - 250px)