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

我知道我可以将我的html,body和div标签设置为100％,但是当我这样做时,div标签的高度等于html和body标签的高度,这是由视口的大小设置的.这或者在其中包含的内容下方的div中创建太多空间(如果视口太大),即使视口不高于页面.或者它会切断div中的内容,并且视口不会向下滚动(如果视口的大小很小).

你可以在matthewelliot.com看到问题.如果缩小到25％,一旦内容填充了#addal-gradient div,你会看到底部的白色渐变突破到背景图像.你可能会问,那么谁会缩小那么远？但是当我在我的iPhone上访问该网站时,我注意到了这个问题,并将其视为“肖像”,我相信很多其他人也会有相同的体验.

如果您需要更多代码来帮助诊断,请告诉我们！

最佳答案 快速而肮脏的修复方法是将高级div(title_bar,nav_bar等)放在包装器div中,将背景应用于包装器,并使主体背景变白.但我确信这有一个纯粹的CSS3解决方案.我会试着找到它.