有可滚动内容和页脚布局的页眉/内容/页脚布局固定到视口底部

Question

有很多这个问题的准复制品，我知道：webpage template where content takes full height of viewport if has 1 line minus footer是一个，但那不是我想要的;有这个令人感兴趣的问题：How to create an HTML CSS Page with Header, Footer and Content大多描述我想要的东西，我想，但不幸的是它有点不连贯，并没有真正的答案。我发现很多的帮助做的事情，我也许可以想出自己，而我不想：

• 固定页眉，页脚固定在底部短的内容，但按下关闭网页时，内容较长（像这里这样经常重复设置：http://boagworld.com/technology/fixed-footers-without-javascript）
• 固定头，内容和页脚，页脚地方不固定到视口底部
• 固定页眉和页脚在内容滚动“的背后”页眉和页脚 - 这一个是可爱的，我用它，但它不是我想要的那一刻

我知道我怎么会得到我想要的东西，如果我使用了“破”或“边界框”盒模型：

1. 将100％高度容器的地方，我想它在网页上横向，与“位置：相对”，使处理内容更容易
2. 在容器中，放置三个绝对定位的div：标头，它被卡在顶部（具有固定高度）;粘在底部（也是固定高度）的页脚;和内容，高度为100％但是填充在顶部和底部以说明页眉和页脚。

在“破”的框模型中，给内容框100％的高度工作得很好，因为高度包括顶部和底部填充。这甚至在IE6 quirks模式下工作得很好，而对于Firefox，我只是使用了“-moz-box-sizing：border-box;”使其以相同的方式工作。

但是我们现在生活在未来，有月亮的殖民地和冷冻早餐比萨饼，所以我尽量不要回忆起“边框”的日子。使用这种布局技术“获取”最困难的事情是如何执行滚动内容。我能想到的唯一的方法是在高于hackish的变化：

1. 同样，开始用100％的高度的容器，“位置：相对于”
2. 同样，绝对定位的页眉和页脚，与固定高度。
3. 对于内容，我绝对会放入没有特定高度的div，但根据页眉和页脚高度设置“top”和“bottom”。

该技术在IE6中不会真正起作用;事实上，它根本不起作用，因为IE6并没有从设置“顶部”和“底部”的含义中获得高度。我可以在IE浏览器支持的CSS中使用那些“活跃”的东西，以便用Javascript有效地计算高度，但我认为这是相当恶心的。

我已经经历了很多网络上非常相似的布局问题的描述，但我还没有找到的关键是获取中间内容框滚动的好技术。我有一种感觉，可能会使用带有顶部和底部边距设置的内容框来说明页眉和页脚，但我不知道如何限制其高度，以便滚动条可以在正确的点（当实际内容溢出页眉底部和页脚顶部之间的空间时）。

想法？链接到模板的宝藏？ （顺便说一下，马特詹姆斯泰勒的领域似乎已经消失了，这给力量造成了很大的干扰。）我几乎没有想法。

更新这里是我想要的一个样本：http://gutfullofbeer.net/dreamlayout.html

这个示例页面应该在火狐和Chrome的工作，我认为Safari浏览器，它在IE8半作品（只有一半自然是因为我们无法将没有料到微软会得到“-ms-border-box”才能正常工作）。

此外，我添加了“javascript”标签，以防某些天才能给我一个IE Hack，这不是太反抗。

另一个更新下面是“妥协”布局，其中中心内容在页眉和页脚下滚动，滚动条由外部容器提供。它实际上看起来很可爱，取决于你的口味，它在IE6中有效，我认为在其他地方（尽管我没有尝试过Opera）。忽略当然的颜色;他们只是作为诊断辅助工具。

http://gutfullofbeer.net/compromiselayout.html

Answer 1

也许这将帮助你： （你需要的jQuery）

$(function() { 
 
\t $("#toggle-content").click(function() { 
 
     $(".more-content").toggleClass("less-content"); 
 
\t }); 
 
});

body { 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    width: 50%; 
 
} 
 

 
.fixed-top { 
 
    width: 100%; 
 
    height: 20vh; 
 
    background: #faa; 
 
} 
 

 
.wrapper { 
 
    positon: static; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 20vh; 
 
    background: #ffa; 
 
} 
 

 
.fixed-bot { 
 
    position: fixed; 
 
    width: 50%; 
 
    height: 20vh; 
 
    background: #faa; 
 
    opacity: .5; 
 
    bottom: 0; 
 
} 
 

 
.more-content { 
 
    /* display: block; */ 
 
    overflow-y: scroll; 
 
    transition: all 0.3s ease; 
 
    height: 40vh; 
 
    
 
} 
 

 
.less-content { 
 
    height: 0; 
 
} 
 

 
/* 
 
other styles 
 
*/ 
 

 
h1,h2 { 
 
    margin-bottom: 0; 
 
    margin-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="fixed-top"><h1>THIS IS HEADER CONTENT</h1> 
 
    <button id="toggle-content" type="button">MORE/LESS</button> 
 
</header> 
 
<section class="wrapper"> 
 
    <section class="content"><h2>CONTENT</h2>, Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. 
 
    </section> 
 
    <section class="more-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p> 
 
</section> 
 
<footer class="fixed-bot"> 
 
</footer> 
 
</section>