css - 将div扩展到页面底部

Question

当浏览器视口(viewport)高于页面内容时，将具有渐变背景(嵌套在 body 标记中)的 div 扩展到页面底部时遇到问题。

我知道我可以将 html、body 和各自的 div 标签设置为 100%，但是当我这样做时，div 标签的高度等于 html 和 body 标签的高度，这是由视口(viewport)。这要么在其中包含的内容下方的 div 中创建太多空间(如果视口(viewport)太大)，即使视口(viewport)不高于页面。或者它会截断 div 中的内容，并且视口(viewport)不会向下滚动(如果视口(viewport)的尺寸太小)。

您可以在 matthewelliot.com 查看问题.如果缩小到 25%，一旦内容填充了 #addition-gradient div，您就会看到底部的白色渐变进入背景图像。您可能会问，谁会缩小到那么远？但当我在 iPhone 上以“纵向”方式访问该网站时，我注意到了这个问题，我相信很多其他人也会有同样的经历。

如果您需要更多代码来帮助诊断，请告诉我!

Answer 1

快速而肮脏的解决方法是将高级 div(title_bar、nav_bar 等)放在包装 div 中，将背景应用于包装，并将正文背景设为白色。但我确信有一个纯粹的 CSS3 解决方案。我会设法找到它。