0

我有一个 3 列结构：left_sidebar center_content right_sidebar 我有一个固定的标题（导航栏）和固定的侧边栏。现在我想在 center_content 中制作一个 div（最上面的一个）也已修复。

<div class="container-fluid">
<div class="row-fluid">
<div class="span1">
    <div class="sidebar-nav sidebar-nav-fixed">
        <ul class="nav nav-list">
            <li class="nav-header">Sidebar</li>
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div><!--/.well -->
<!--Sidebar content-->
</div>
<div class="span9">
    <div class="row-fluid well-white">
        <div class="span12">
            <div class="row-fluid">
                <div class="span12 content-header">
                    Fluid 12 content container and options panel<hr>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span9">
                    Fluid 9 content header
                    <div class="row-fluid">
                        <div class="span6">Fluid 6 header division</div>
                        <div class="span6">Fluid 6 header division</div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">Fluid 12 real content here<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
                    </div>
                </div>
                <div class="span3">Fluid 3 sidebar for advertisment fixed as well when scrolling</div>
            </div>
        </div>
    </div>
<!--Body content-->
</div>
<div class="span2">
    <div class="sidebar-nav sidebar-nav-fixed">
        <ul class="nav nav-list">
            <li class="nav-header">Sidebar</li>
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div><!--/.well -->
</div>    
</div>
</div>

有两个选项我希望他们如何滚动

首先，修复.row-fluid well-white并在此列中仅滚动第二个row-fluid。我的意思是修复.content-header。

第二个是只做.content-header来修复。（这个选项似乎更现实）

每当我尝试修复.content-header时，它都会覆盖其他 div（比如在右侧边栏的顶部和他下方的行下方）

更新 为了显示我在说什么，您可以查看 Google Plus 个人资料页面，我想我需要重新制作我的代码以使用带有“附加”javascript 组件的 3 列

UPDATE2 示例：

---------------------------------
          fixed navbar
---------------------------------
| flsb | content options | frsb |
|      |-----------------|      |
|      |  content here   |      |
|      |                 |      |
|      |                 |      |
|      |                 |      |

flsb - 固定左侧边栏 (span2)

frsb - 固定右侧边栏 (span2)

内容选项 - 固定 (span8)

导航栏 - 固定 (span12)

这里的内容 - 可滚动 ^_^ (span8)

4

0 回答 0