Question

我想要实现的目标如下：

带有导航栏的页眉，其高度固定（以像素为单位）并拉伸视口的宽度。
填充视口剩余高度的列中的页面内容，以及溢出时只会创建更多列（不是更长的列），因此只创建不滚动导航栏的水平滚动条。

我的代码主要基于此示例Multi-column issue with horizontal scroll。但是当我尝试添加标题时，我总是最终得到一个垂直滚动条。基本设置如下所示，更完整的小提琴是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;
}

我已经在http://jsfiddle.net/e11hLtby/1/

修改了你的小提琴

修复了具有水平滚动内容的标题

1 个答案: