使用视口高度会导致某些部分具有某些屏幕尺寸的像素行

Question

编辑：解决方案 - 我添加了3个属性。

section{
    **height: calc(86vh + 2px);**
}
:target {
    display: block;
    position: relative;
    top: -14vh; 
    visibility: hidden;
    **margin-top: 2px;**
}
#spacer{
    width: 100vw;
    height: 14vh;
    position: relative;
    top: 0;
    **margin-bottom: -2px;**
}

这是小提琴https://jsfiddle.net/JohnWeb/9m2ovuyo/

我使用vh来调整我拥有的3个部分的大小。但是在某些屏幕尺寸下，它会在前两个部分上方留下一条像素线，但第三部分将是正确的尺寸。上次我查了14vh + 86vh = 100vh = 100％...

section{
    height: 86vh;
}

#spacer{
    width: 100vw;
    height: 14vh;
    position: relative;
    top: 0;
}

^绿色部分下方和浅绿色部分上方^

Answer 1

由于问题并未在所有屏幕中出现，因此很难给出正确的解决方案但是存在这种情况的黑客攻击。您可以使用负边距留出2px的差距。

#spacer{
  margin-bottom: -2px;
}

和相同的高度，即2px你加入你的下面部分用浅绿色，否则它将从底部留下2px的间隙。通过这个浅绿色部分将在标题部分下方重叠2px，这将解决它们之间的任何无条件差距。 Bootstrap也使用类似的技术通过创建15px装订线来消除任何可能的布局错误。