html - 如何浮动左侧内容并修复右侧内容？

Question

我正在研究一种结构，以固定顶部导航、可滚动的左侧导航和固定的右侧导航。

我在这里创建了一个小提琴。只需要css的帮助。

http://jsfiddle.net/PxbX9/

#header {
    position:fixed;
    background:red;
    width:700px;
    height:30px;
}
#left-block {
    float:left;
    width:350px;
    background:blue;
    height:1000px;
    margin-top:30px;
}
#right-block {
    float:left;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    .fixed-block {
        postion:fixed;
        height:1000px;
    }

Answer 1

这可以通过重组你CSS来实现：

#header {
    position:fixed;
    background:red;
    width:700px;
    height:30px;
}
#left-block {
    float:left;
    width:350px;
    background:blue;
    height:1000px;
    margin-top:30px;
}
#right-block {
    display: inline-block;
    float:right;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    position:fixed;
}

我只对选择器进行了CSS更改#right-block。

1. 删除了 class .fixed-block，其中有postion(should be position) 形式的错字。
2. position: fixed;已添加到#right-block选择器中。
3. display: inline-block;并且float: right;也被添加了。

演示

希望这可以帮助。

Answer 2

看看那个工作小提琴

纯 CSS 解决方案，非常动态，完全响应。

HTML：

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="RightContent">
            </div>
            <div class="LeftContent">
            </div>
        </div>
    </div>
</div>

CSS：

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.Header
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}
.Wrapper > div
{
    height: 100%;
    overflow: auto;
}

.LeftContent
{
    /*for demonstration only*/
    background-color: #90adc1;
}
.RightContent
{
    float: right;
    width: 500px;
    /*for demonstration only*/
    background-color: #77578a;
}