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）
修复页眉，内容和页脚，其中页脚未固定到视口底部
修正页眉和页脚，其中内容在页眉和页脚后面滚动 - 这个很可爱，我已经习惯了，但这不是我想要的那个

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

在页面上水平放置100％高度的容器，使用“position：relative”使内容处理更容易
在容器中，放置三个绝对定位的div：标题，粘在顶部（固定高度）;页脚，粘在底部（也固定高度）;和内容，高度为100％但，顶部和底部有填充，以说明页眉和页脚。

在“破碎”框模型中，给予内容框100％高度的效果很好，因为高度包括顶部和底部填充。这甚至在IE6怪癖模式下运行良好，对于Firefox我刚刚使用了“-moz-box-sizing：border-box;”使其以同样的方式工作。

但在这里，我们生活在未来，有月亮殖民地和冷冻早餐比萨饼，所以我尽量不回忆起“边境盒”时代。对于我来说，“获得”这种布局技术最困难的是如何进行滚动内容。我能想到的唯一方法就是对上述内容的一种变化：

再次，从100％高度的容器开始，“position：relative”
同样，绝对定位的页眉和页脚，具有固定的高度。
对于内容，我绝对放入没有特定高度的div，但根据页眉和页脚高度设置“顶部”和“底部”。

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

我在Web上经历过很多关于非常相似的布局问题的描述，但是我还没有找到关键的东西是让中间内容框滚动的好方法。我有一种感觉，可能会使用带有上边距和下边距设置的内容框来说明页眉和页脚，但我不知道如何约束它的高度，以便滚动条可以启动正确的点（当实际内容溢出页眉底部和页脚顶部之间的空间时）。

想法？链接到模板的宝库？（顺便说一下，马修詹姆斯泰勒的领域似乎已经消失了，给部队带来了很大的干扰。）我几乎没有想法。

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

该示例页面应该可以在Firefox和Chrome中运行，我认为是Safari，它在IE8中运行一半（只有一半因为我们当然不能指望微软让“-ms-border-box”正常工作）。

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

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

http://gutfullofbeer.net/compromiselayout.html

Answer 1

也许这会对你有所帮助：（你需要jQuery）

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

标题/内容/页脚布局，可滚动内容和页脚固定到视口底部

1 个答案: