子Div分数的百分比

Question

我想创建一个固定位置的导航栏，它的容器div的25％，但由于某种原因导航栏的大小为视口的25％，我不确定如何解决它。我已经在这个JSFiddle中复制了这个问题：http://jsfiddle.net/G6yJG/1/

编辑：虽然从固定到绝对改变导航div的位置修复了尺寸问题，但却导致导航无法与页面一起滚动。那么是否有一项解决方案可以让我确定导航位置，并且仍然是其父容器的25％？

这里是我的代码：

HTML：

<div class="container"> 
      <nav> 
       <ul> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="#">Coffee Menu</a></li> 
        <li><a href="#">Locations</a></li> 
        <li><a href="#">About</a></li> 
       </ul> 
      </nav> 

      <section class="main"> 
       Test 
      </section> 
</div> 

CSS：

body { 
    background-color: rgb(210,159,182); 
} 

.container { 
    width: 70%; 
    margin: 20px auto; 
} 

nav { 
    width: 25%; 
    float: left; 
    position: fixed; 
} 

nav ul li { 
    line-height: 50px; 
} 

nav ul li a { 
    font-family: 'Grand Hotel', cursive; 
    font-weight: normal; 
    font-size: 31px; 
    color: rgb(104,58,122); 
    font-weight: 700; 
    text-decoration: none; 
    display: block; /* reinforce default space */ 
    border-top: 1px solid rgb(104,58,122); 
} 

.main { 
    float: right; 
    width: 75%; 
    height: 2000px; 
    background-color: rgb(255,255,255); 
} 

.fix { 
    clear: both; 
} 

Answer 1

这是由于position: fixed;，这使得它的大小为148px。将其更改为position:relative将宽度降为101px。

如果您需要它的宽度相同但仍然固定，您可以定义一个与容器的百分比相同的不可见包装，并将其设置为position: fixed，其中包含相对/ 25％的导航。

像这样：fiddle

Answer 2

我做这个例子和它的运作良好

Please Try ItDEMO