儿童Div父母Div的百分比

Question

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

编辑：虽然将NAV 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 It DEMO