在纯HTML和CSS中具有水平滚动内容的页眉和页脚 [英] Header and footer with horizontal scrolling content in pure HTML and CSS

问题描述

我尝试使用HTML和CSS创建布局，因此我没有使用Javascript进行布局的额外复杂性。

布局

页眉和页脚应具有相同的高度，并且应始终可见。在调整大小时，标题，内容和页脚应相应地扩展/合约，但有一些例外。首先，当主内容上的最大高度被命中时，主内容不应该再扩展，而是头部和尾部应该扩展。第二，当主要内容的最小高度被击中时，没有一个部分应该收缩，并且视图应该是可滚动的。

内容，它可以水平滚动与视口的主滚动条在屏幕的底部，而页眉和页脚应该保持在原地。

到目前为止，我想如何通过填充整个视口的绝对定位的容器div来实现水平可滚动的主要部分，但我似乎无法找出任何元素的垂直大小。我唯一能想到的方法是挂钩到resize事件，我想避免，因为它感觉hacky。

解决方案

艰难的问题我只是使用固定的
定位的页眉和页脚，然后一个简单的
请参阅我制作的 小提示

HTML

 < div id =header> ; Header< / div> 
< div id =content>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容; / div> 
< div id =footer> Footer< / div> 
   

CSS

  * {
 padding：0; 
 margin：0; 
} 
 html {
 overflow-y：hidden; 
} 
＃header，＃footer {
 width：100％; 
 position：fixed; 
 height：50px; 
 left：0; 
 background：＃404040; 
 z-index：9999; 
} 
 #header {top：0;} 
 #footer {bottom：0;} 
 #content {
 position：absolute; 
 background：gray; 
 top：50px; 
 left：0; 
 min-width：100％; 
 bottom：50px; 
 float：left; 
 display：block; 
 width：5000px; / *您的内容宽度为5000，用于测试* / 
} 
  

和页脚缩放您可以使用 这个小提琴





Css3方式

您可以使用新的css3属性弹出框：

请参阅以下链接，了解 示例

有关flexbox的更多信息： Tutsplus

Flex-

会在IE9中不支持。 浏览器将包含IE10：

caniuse

I'm attempting to create a layout using just HTML and CSS so that I don't have the additional complication of using Javascript to do layout.

The layout is below, and consists of three parts: header, main content, and footer.

The header and footer should be the same height, and should always be visible. On resize, the header, content, and footer should expand/contract accordingly, with a few exceptions. First, when a max height on the main content is hit, the main content should not expand any more, and instead, the header and footer should just expand. Second, when a min height on the main content is hit, none of the sections should contract anymore, and the view should just be scroll-able.

As for the main content, it is horizontally scrollable with the viewport's main scrollbar at the bottom of the screen, while the header and footer should stay in place.

So far, I've figured out how to achieve the horizontally scrollable main portion through a absolute positioned container div that fills the entire viewport, but I can't seem to figure out the vertical sizing of any of the elements. The only way I can think of is to hook into the on resize event, which I'd like to avoid because it feels hacky.

解决方案

Tough in your problem i would just use fixed positioned header and footer and then a simple horizontal content div.. See the fiddle i made

THE HTML

<div id="header">Header</div>
<div id="content">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content  </div>
<div id="footer">Footer</div>

THE CSS

*{
    padding:0;
    margin:0;
}
html{
    overflow-y:hidden;
}
#header,#footer {
    width:100%;
    position:fixed;
    height:50px;
    left:0;
    background:#404040;
    z-index:9999;
}
#header{top:0;}
#footer{bottom:0;}
#content{
    position:absolute;
    background:gray;
    top:50px;
    left:0;
    min-width:100%;
    bottom:50px;
    float:left;
    display:block;
    width:5000px; /*your content width but 5000 for testing*/
}

If you want the header and footer to scale you could use this fiddle



The Css3 way
You can use the new css3 property flex-box:

See following link for an Example

More info about flexbox: Tutsplus

Flex-box is exactly what would do the trick

But it will not be supported in IE9...
Tough all of the new browsers will have it incl IE10:
caniuse

这篇关于在纯HTML和CSS中具有水平滚动内容的页眉和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！