0

在 img 背景所在的网站上工作。我需要定位导航“在海面上”（见截图）。在我的分辨率下，它工作正常（1680x1050），但人们可以在“海上”导航。我已经以百分比定义了位置。有谁能够帮我？

div#navigation {
height:auto;
overflow:hidden;
margin-top:19.2%;
margin-left:auto;
margin-right:auto;
text-align:center;
width: auto;

}

屏幕我的分辨率（工作正​​常） https://dl.dropboxusercontent.com/u/19898988/website.jpg

好友分辨率（效果不佳） https://dl.dropboxusercontent.com/u/19898988/1001758_10200668454011660_856480470_n.jpg

web.sundanceparty.sk

非常感谢

4

1 回答 1

0

在您当前的布局中，从页面顶部到菜单底部的垂直距离是四个部分的总和，两个具有百分比高度（#countdown 的上边距和 #navigation 的上边距），两个具有固定高度（高度的#countdown 和#navigation）。这个总和使得不同窗口大小的页面宽度百分比略有不同，因为固定部分不是不同窗口宽度的相同百分比。

为了使这个百分比保持不变（从而使#navigation底部分辨率的位置与分辨率无关），我建议将#countdown、#container 和#navigation 的样式替换为以下内容：

#countdown {
  margin-top: 7%;
  position: absolute;
  right: 0;
  top: 0;
}

#container {
  font-family: 'Telex',Helvetica;
  font-size: 16px;
  margin: 29.9% 0 0;
  padding: 0;
  position: relative;
}

#navigation {
  bottom: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  position: absolute;
  text-align: center;
  width: 100%;
}

所以容器的顶部偏移会一直是 29.9%（这似乎与背景图上的“海平面”相对应），而#navigation 的底线会一直停留在这个位置。

于 2013-07-04T22:50:50.710 回答