html - 具有水平滚动内容的固定标题

Question

我想实现的是:

• 带有导航栏的页眉，以像素为单位固定高度并拉伸(stretch)视口(viewport)的宽度。

• 填充视口(viewport)剩余高度的列中的页面内容，当溢出时，它只会创建更多的列(而不是更长的列)，因此只会创建一个水平滚动条，而不会滚动导航栏。

我的代码主要基于这个例子 Multi-column issue with horizontal scroll .但是当我尝试添加标题时，我总是以垂直滚动条结束。基本设置如下所示，更完整的 fiddle 是 here

<div id="navigation">
    NAVIGATION
</div>

<div id="content">
    <div class="scroller">
        <div class="columns">
            CONTENT   
        </div>
    </div>
</div>

html, body {
width   :   100%;    
height  :   100%;

margin  :   0;
padding :   0;

display :   table;

color   :   #FFF;
}

#navigation {    
height      :   128px;

display     :   table-row;

background  :   #333;    
}

#content {  
display     :   table-row;  
background  :   #444;
}

.scroller {
height      :   100%;

overflow-x  :   auto;
overflow-y  :   hidden;        
}

.columns {
width   : auto;
height  : 100%;

padding : 0 20px;    

-webkit-column-fill     : auto;
-webkit-column-width    : 300px;
-webkit-column-gap      : 40px;
   -moz-column-fill     : auto;
   -moz-column-width    : 300px;
   -moz-column-gap      : 40px;

text-align  :   justify;    
}

Answer 1

添加 position: fixed; 和 right: 0; 和 left: 0;。因为您要修复 #navigation，所以您需要确保将顶部边距添加到您的 #content div。

#navigation {    
    height: 128px;
    display:    table-row;
    background: #333;   
    position: fixed;
    right: 0;
    left: 0;
}

我已经根据此处建议的更改修改了您的 fiddle http://jsfiddle.net/e11hLtby/1/