如何制作弹性垂直布局？

Question

我有一个页面，有2个领域：标题和内容。
标题应当[固定]固定在顶部，并且没有固定的高度，并且其下面的内容。

问题是，如果内容区溢出，我需要滚动内容区域...例如：标题应始终存在，但内容可以向下滚动，即浏览器窗口，并且酒吧始终位于顶部和页面滚动。

我使用JS在不同的页面中执行此操作，其中“页脚”具有固定高度，因此我可以说“嘿，内容，使用页面高度减去页脚高度”。

我可以只用HTML + CSS来实现吗，还是我需要使用JS？如何？

Answer 1

这应该这样做...

#header { 
    position:fixed; 
} 

Answer 2

具有一组头高度将使它更容易些，但最终的JavaScript将帮助你完成你在找什么。基本上你需要知道用户屏幕的高度和标题的高度。从用户屏幕的高度减去标题的高度，然后使用该值设置内容的高度。

请务必设置溢出：auto;获取您的内容的滚动条。

您正在使用div进行布局，而不是表格，对吧？如果不是，请考虑进行更改。使用div的网页设计比表格设计更容易操作。

这个链接应该帮助你得到屏幕的高度所需的特定JS性能：Here

Answer 3

你只需要CSS。下面的代码会创建一个100px高的页眉，一个50px高的页脚和一个名为“内容”的div，它将填充页面的其余部分。整个事情将占用视口内的所有可用空间。如果您调整浏览器窗口的大小，页面将相应地缩放。

如果“内容”div中有足够的东西，您会在其中获得一个滚动条。滚动条不会覆盖页眉或页脚的任何部分，它将位于“content”div内。

<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div> 

div#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
} 

div#content { 
    position: fixed; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 50px; 
    overflow: auto; 
} 


div#footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
} 

以不同的方式设置“左”和“右”，可以使其仅占用一定量的可用空间。

div#header { 
    position: fixed; 
    top: 0; 
    left: 20%; 
    right: 20%; 
    height: 100px; 
} 

div#content { 
    position: fixed; 
    top: 100px; 
    left: 20%; 
    right: 20%; 
    bottom: 50px; 
    overflow: auto; 
} 


div#footer { 
    position: fixed; 
    bottom: 0; 
    left: 20%; 
    right: 20%; 
    height: 50px; 
} 

使用上面的CSS，整个事情将被集中，并留下40％的水平可用空间为空。