子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