如何浮动左侧内容并修复右侧内容？答案

【问题标题】：How to float left content and fix right content?如何浮动左侧内容并修复右侧内容？
【发布时间】：2013-10-02 12:32:29
【问题描述】：

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

我在这里创建了一个小提琴。只需要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 {
    float:left;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    .fixed-block {
        postion:fixed;
        height:1000px;
    }

【问题讨论】：

标签： html css header fixed

【解决方案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 选择器。

删除了 .fixed-block 类，该类的拼写错误为 postion（应为 position）。
position: fixed; 已添加到 #right-block 选择器中。
display: inline-block; 和 float: right; 也已添加。

DEMO

希望这会有所帮助。

【讨论】：

感谢您的帮助！

【解决方案2】：

看看那个Working Fiddle

纯 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;
}

【讨论】：

感谢您的帮助！