元素在不同的屏幕上失去比例

Question

正如主题所说，website导航时遇到了麻烦。

这里的照片是从19'显示器拍摄的（看看我用红色标记的间隙）

这是同一个网站，但是来自23'显示器（没有间隙）

我认为这会奏效，但事实并非如此：

伪：

#header{position: relative; width: 100%; height: 8%;}
#nav{position: absolute; bottom: 0; right: 10%; height: 3%;}

我认为此方法可行，标题在所有标准计算机屏幕上看起来都相同

---

我根据Tanner回答

编辑了我的CSS

22'显示器中的

（看起来很好）：

23'监视器中的

（有区别）：

如何在每个屏幕的底部0进行导航？

Answer 1

所以你的身高是基于百分比的，这意味着它会随着浏览器窗口缩小，因为19'显示器的8％小于23'显示器的8％。

如果您在min-height:75px;元素上设置了#header而不是使用百分比，则会阻止它缩小到超过该点并将其更改为position: fix;

#header{position: fix; width: 100%; height: 8%; min-height:75px;}

Answer 2

我设法解决了这个问题：

我所做的是:(标题假定与位置：修复;）

#header{position: fix; width: 100%; height: 6.9%; min-height: 68px;}
#navigation{position: absolute; bottom: 0; right: 21%; height: 37px;}

这会在每个屏幕的底部0处设置导航。