与水平滚动的内容固定报头

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

我根据我的代码大多这个例子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;  
}

来源

2015-08-21 Martin

修订你的提琴**哪里是你的CSS？**欢迎堆栈溢出！寻求代码帮助的问题必须包含所需的行为，特定的问题或错误，以及在问题本身**中重现**所需的最短代码。请参阅[**如何创建最小，完整和可验证示例**]（http://stackoverflow.com/help/mcve） –

添加position: fixed;与right: 0;和left: 0;。由于您正在修复#navigation，因此您需要确保将最高保证金添加到#content格。

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

我在这里建议的更改http://jsfiddle.net/e11hLtby/1/

来源

2015-08-21 20:04:04

感谢您的快速回复。但是，我仍然以垂直滚动条代替水平滚动条。 – Martin

你有'高度：100％;'为你的容器'.columns'设置。为其设置一个定义的高度（即500px;）。这里是你修改的修改小提琴。 http://jsfiddle.net/e11hLtby/3/ –

是的，因为我想让内容填充所有剩余的垂直空间，而不管观看者窗口大小。给它一个固定的高度是我不想要的。对不起... – Martin

与水平滚动的内容固定报头

回答

相关问题