html - 100% 宽度与 CSS 中的过渡

Question

我在页面左侧有一个导航栏：

#list {
    position: fixed;
    width: 300px;
    height: 100%;
    background-color: #262626;
    color: #494949;
}

页面底部有一个带有 3 个选项按钮的菜单栏。所以按钮必须同样大，并且应该在导航栏旁边。所以左边300px。它应该看起来像这样： http ://imgur.com/MkWJFFo

我试过浮动：左；但它也没有工作。我真的不知道如何让这 3 个条形全宽并在该区域上平均分配。可能有点不清楚我想要实现什么。但是请询问不清楚的地方，我会尽力向您解释！谢谢 ：）

Answer 1

嗨回顾这个演示http://jsfiddle.net/9RYhR/22/

我不只为每个项目使用 Jquery width，33.3%而padding-left他的容器等于侧边栏的宽度。

Answer 2

使用 calc 你可以得到宽度。

http://jsfiddle.net/3n1gm4/vne79/

HTML：

<div id="list"> The Menu </div>
<div id="container">
    <div id="content">
       <p> ... </p>
    </div>
</div>

<nav>
    <a href="" class="one">Link 1</a>
    <a href="" class="two">Link 2</a>
    <a href="" class="three">Link 3</a>
</nav>

CSS：

身体{边距：0；填充：0；}

#list {
    position: fixed;
    width: 300px;
    height: 100%;
    background-color: #262626;
    color: #f00;
}

#container {
    margin-left: 300px;
    padding: 10px;
    width: calc( 100% - 300px - 20px ); /* 100% - width of nav - padding */
    height: 100%;
}

nav {
    display: block;
    position: fixed;

    margin-left: 300px;
    width: calc( 100% - 300px );
    bottom: 0;
}

nav a {

    display: block;
    height: 35px;
    width: calc( 100% / 3 ); /* could use 33.33333% as well */
    float: left;
}

.one { background: #5ff; }
.two { background: #f5f; }
.three { background: #ff5; }