页眉/内容/页脚布局，内容可滚动，页脚固定在视口底部

Question

我知道这个问题有很多类似的副本：如果只有一行内容，网页模板如何占据整个视口高度减去页脚是其中之一，但那不是我想要的；还有一个非常滑稽的问题：如何创建具有标题、页脚和内容的HTML CSS页面，它大部分描述了我想要的，但不幸的是它有点不连贯，而且没有真正的答案。我发现有很多帮助可以做出我可能自己就能想出来的事情，而我并不想要这些：

• 固定页眉，当内容较短时页脚固定在底部，但当内容较长时将被推出页面（就像这里经常重复的设置一样：http://boagworld.com/technology/fixed-footers-without-javascript）
• 固定页眉、内容和页脚，其中页脚不固定在视口底部
• 固定页眉和页脚，其中内容在页眉和页脚后面滚动 - 这个很可爱，我用过，但现在不是我想要的

如果我使用“损坏”的或“边框框模型”，我知道如何得到我想要的：

1. 在页面上任何水平位置放置一个100%高度的容器，使用“position:relative”使处理内容变得更容易
2. 在容器中，放置三个绝对定位的div：页眉，固定在顶部（具有固定高度）；页脚，固定在底部（同样具有固定高度）；内容，高度为100%，但顶部和底部留有填充以适应页眉和页脚。

在“破碎”的盒模型中，将内容框设置为100%的高度非常好用，因为高度包括顶部和底部填充。即使在IE6怪异模式下也能很好地工作，对于Firefox，我只需使用“-moz-box-sizing:border-box;”使其以相同的方式工作。

但是现在，我们生活在未来，有月球殖民地和冷冻早餐披萨，所以我尽量不过多地回忆“边框盒子”时代。这种布局技术对我来说最难理解的是如何滚动内容。我能想到的唯一方法是上述方法的一个hackish变体：

1.再次从100%高度容器“position:relative”开始 2.再次使用绝对定位的标题和页脚，并固定高度。 3.对于内容，我会绝对放置一个没有特定高度但根据页眉和页脚高度设置“top”和“bottom”的div。

那种技术在IE6中并不起作用；实际上，它根本不起作用，因为IE6不会从设置"top"和"bottom"两者来推导高度。我可以使用IE支持的CSS中的"active"属性来有效地使用Javascript计算高度，但我认为这样做相当恶心。

我经历了很多类似布局问题的描述，但关键是我还没有找到一个好的方法来让中间的内容框滚动。我有一种感觉，可以使用一个内容框，将顶部和底部边距设置为头部和页脚的高度，但我不知道如何限制其高度，以便滚动条在正确的位置出现（当实际内容溢出页眉底部和页脚顶部之间的空间时）。

有什么想法吗？有没有珍藏模板的链接？（顺便说一句，Matthew James Taylor的域名目前似乎已经消失了，这在力量上造成了巨大的干扰。）我几乎没有任何想法。

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

那个示例页面应该可以在Firefox和Chrome以及我认为的Safari中正常工作，在IE8中它只能半工作（只有一半，因为当然我们不能期望微软能够正确地处理“-ms-border-box”）。

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

另一个更新 这是“妥协”布局，其中中央内容在头部和底部滚动，“滚动条”由外部容器提供。 它实际上看起来很可爱，取决于你的品味，并且它在IE6中工作，我想其他所有地方也都可以（尽管我没有尝试过Opera）。 当然忽略颜色; 它们只是作为诊断工具存在。

http://gutfullofbeer.net/compromiselayout.html

- Pointy

---

我有同样的问题，你在IE上解决了吗？这是我的问题链接：http://stackoverflow.com/questions/3094367/fixed-liquid-fixed-row-layout - user314362

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>

- Wojciech Dobry