不影响视口大小的全宽横幅

问题描述 投票:0回答:1

我已经和这个简单的问题争论了一段时间,我正在寻求一些帮助......

我正在尝试制作横跨页面整个宽度的全宽颜色横幅,但不会以任何方式影响浏览器视口大小。我希望它对人眼可见,但我不希望它影响浏览器的开始视图或滚动行为的大小/位置...就像它不是真的存在。

我还希望能够在HTML中内嵌横幅。

这是我的测试页面:http://www.tanatu.com/widthtest

  • 绿色横幅完美无缺,但它的y位置是用CSS定义的(这很痛苦)
  • 粉红色横幅是我迄今为止最好的猜测,并且在Chrome上按预期工作,但在iOS上的Safari上没有,其中视口偏向一侧

Safari iOS Positioning Issue

Correct Positioning

几个月来我一直在玩这个,所以任何帮助都会受到大家的赞赏! :0)

谢谢!

html ios css viewport banner
1个回答
0
投票

因为您试图突破您的挑战所在的父容器。您可以通过几种方式执行此操作,但我认为最简单的方法是在不完全更改标记的情况下使用视口宽度单位和calc()的组合

如果你在#widthtest4上更改这些属性,它应该工作:

#widthtest4 {
  width: 100vw;
  margin-left: calc(-50vw + 426px);
}
© www.soinside.com 2019 - 2024. All rights reserved.