我正在尝试让我的网站在移动设备上很好地显示。我有一个标题,固定在顶部,高度为 70px。我有一个主菜单作为页脚,固定在底部,高度为 250 像素。
中间的内容是一张一张的多张图片。我希望每张图片正好占据“页眉”和“页脚”之间的剩余高度。
我通常需要它在移动设备上工作,所以我不想将图像的高度设置为静态高度(即:在 320x480 设备上我可以计算高度为 480-70-250 = 160px 但我需要它也能在 360x640px 的设备上工作。
最佳答案
你应该看看 CSS Calc https://css-tricks.com/a-couple-of-use-cases-for-calc/还有视口(viewport)单位 https://css-tricks.com/the-lengths-of-css/
你可以这样做:
height: calc(100vh - 70px - 250px)
关于html - 设置多个容器的高度为两个固定div之间的剩余高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32826252/