Question

在img背景网站上工作。我需要将导航定位在“海面之上”（见截图）。在我的决议上它工作正常（1680x1050），但人们有“在海上”导航。我已经定义了百分比的位置。有人能帮助我吗？

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

}

SCREEN 我的决议（工作正常） https://dl.dropboxusercontent.com/u/19898988/website.jpg

朋友解决（工作不好） https://dl.dropboxusercontent.com/u/19898988/1001758_10200668454011660_856480470_n.jpg

web.sundanceparty.sk

非常感谢

Answer 1

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

为了使这个百分比保持不变（从而使#navigation bottom 独立于分辨率的位置），我建议将#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％（这似乎与背景图像上的“海平面”相对应），＃navig的底线始终保持在此位置。

适应所有分辨率的导航

1 个答案: