Html 用CSS定位导航栏

我无法将垂直导航栏定位到content Div的左侧。以下是我拥有的内容和我想要的内容：

问题是，它是一个固定的位置，所以对于大小不同的监视器，它是不同的。所以我猜我需要相对定位，但我不太确定怎么做

HTML

---

谢谢

固定位置将帮助您在向下滚动时保持菜单可见。否则，您不应该使用它

<div class="container">
  <div class="one-third column">
      <ul class="yourmenu">xxx</ul> 
      <div class="filler"></div>
  </div>
  <div class="two-thirds column">
      Your page content here
  </div>
</div>

<style>
    .container {width:960px;margin:auto;}
    .column {float:left;position:relative;}
    .one-third {width:320px;}
    .two-thirds {width:640px;}
    .filler {width:100%;height:10px;}
    .yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */
</style>

xxx
你的网页内容在这里
.container{宽度：960px；边距：auto；}
.column{float:left；position:relative；}
.1/3{宽度：320px；}
.2/3{宽度：640px；}
.填充物{宽度：100%；高度：10px；}
.yourmenu{position:fixed；top:100px；}/*不要定义left，因为它将修复屏幕而不是列div*/

使用百分比（%）而不是像素（px）。

可以更具体一些吗？应该更改什么值？是。将“px”更改为“%”。这有助于你理解吗？什么规则？宽度？高度？这取决于您希望页面缩放的方式。通常，您希望宽度是可伸缩的（因此百分比），小部件（如导航栏）具有设置的高度（px）。因此，您应该在回答中对此进行描述。您能提供一个JSFIDLE或live示例吗？谢谢，这很有效。我不得不改变容器和“yourmenu”顶部对齐的值，使其与我的匹配，但一切都正常。再次感谢：）

.content { 
background-color: #FFFFFF; 
width: 650px; 
padding: 20px;
margin: auto; 
word-wrap: break-word 
}

.container {
position: fixed;
top: 151px;
left: 420px;
}

<div class="container">
  <div class="one-third column">
      <ul class="yourmenu">xxx</ul> 
      <div class="filler"></div>
  </div>
  <div class="two-thirds column">
      Your page content here
  </div>
</div>

<style>
    .container {width:960px;margin:auto;}
    .column {float:left;position:relative;}
    .one-third {width:320px;}
    .two-thirds {width:640px;}
    .filler {width:100%;height:10px;}
    .yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */
</style>