javascript - 页眉/内容/页脚布局，可滚动内容和页脚固定到视口(viewport)底部

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)

修复了页眉、内容和页脚，其中页脚未固定到视口(viewport)底部

修复了页眉和页脚，内容在页眉和页脚“后面”滚动 - 这个很可爱，我用过它，但目前不是我想要的

如果我使用“broken”或“border-box”框模型，我知道如何得到我想要的:

在页面上水平放置一个 100% 高度的容器，使用“position:relative”使处理内容更容易

在容器中，放置三个绝对定位的 div:头部，它粘在顶部(具有固定的高度)；页脚，粘在底部(也是固定的高度)；和内容，高度为 100% 但是 在顶部和底部填充以考虑页眉和页脚。

在“ splinter ”框模型中，给内容框 100% 的高度效果很好，因为高度包括顶部和底部填充。这甚至在 IE6 怪癖模式下也能很好地工作，对于 Firefox，我刚刚使用了“-moz-box-sizing: border-box;”使其以相同的方式工作。

但我们生活在 future ，有月球殖民地和冷冻早餐比萨饼，所以我尽量不去记忆太多关于“边境盒子”的日子。对我来说，使用这种布局技术最难“获得”的是如何滚动内容。我能想到的唯一方法是对上述内容的一种骇人听闻的变体:

同样，从一个 100% 高度的容器开始，“position:relative”

同样，绝对定位的页眉和页脚，具有固定的高度。

对于内容，我绝对会放入一个没有特定高度的 div，但根据页眉和页脚的高度设置“顶部”和“底部”。

该技术在 IE6 中不会真正起作用；好吧，实际上它根本不起作用，因为 IE6 不会从同时设置“顶部”和“底部”的含义中推导出高度。我可以在 IE 支持的 CSS 中使用“活跃”的东西来有效地使用 Javascript 计算高度，但我认为这很恶心。

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

想法？链接到模板宝库？ (顺便说一句，马修詹姆斯泰勒的领域现在似乎已经消失，在原力中造成了很大的干扰。)我几乎没有想法。

更新 这是我想要的示例: http://gutfullofbeer.net/dreamlayout.html

该示例页面应该在 Firefox 和 Chrome 中工作，我认为在 Safari 中它可以工作一半(只有一半，因为我们当然无法期望微软让“-ms-border-box”正常工作)。

此外，我正在添加“javascript”标签，以防某些天才可以给我一个不太令人反感的 IE hack。

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

http://gutfullofbeer.net/compromiselayout.html

Answer 1

也许这会帮助你:
(你需要jQuery)

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

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>