html - 设置多个容器的高度为两个固定div之间的剩余高度

标签 html css responsive-design mobile-devices

我正在尝试让我的网站在移动设备上很好地显示。我有一个标题,固定在顶部,高度为 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/

相关文章:

html - 画线的更好方法?

Python BeautifulSoup - 获取 Div Select Option 中的值

javascript - 如何在页面加载时滚动页面,而不是嵌入的 PDF 对象

internet-explorer-6 - IE6 和带填充的盒子模型

html - 使用 imgs/slider 调整动态 DIV 的大小 - 最大宽度未按计划运行

css 规则未在 safari 中应用,但在 firefox 中正常

html - 在所有智能手机上忽略 CSS

html - 悬停时隐藏外部节点元素

css - 自定义图标字体显示在我的本地主机环境中,但不显示在我的外部服务器上

Javascript - 当 window.pageYOffset 已经为 0 时检测滚动尝试