Question

我正在开发一个固定顶部导航的结构，一个可滚动的左导航和一个要修复的右导航。

我在这里创造了一个小提琴。只需要帮助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;
    }

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次更改。

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

<强> DEMO

希望这有帮助。

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

如何浮动内容并修复正确的内容？

2 个答案:

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