在页眉和页脚之间包装内容

Question

我是css中的一个完整的菜鸟，我实际上决定做一些前端来发现css的乐趣。而且我必须说我有点失落。我有几千次被问过的东西，但看起来有很多不同的方法可以做我想做的事。

我使用angular.js作为设计的绑定和引导程序（以简化设计问题）。我希望有一个固定的标题，一个固定的页脚，在这两个之间，我的内容，可以是一个caroussel，背景图像，...... 我遇到了麻烦，例如让caroussel在页眉和页脚之间占据整个高度和宽度，但我找到了如下例子：http://www.bootply.com/N32yoVoWVI#人们定义了一个包装内容来包装内容。

我真正得到的是，通常，他们为包装器定义了一个与标题高度相对应的填充，因此图像不会在页眉/页脚上显示。

如果我在移动设备上会发生什么？标题中的标志栏是否较小？然后我的标题的高度是不相同的。在这种情况下我应该使用媒体查询吗？要定义不同屏幕尺寸的行为？

我觉得我不是很清楚，我有点迷失，所以要恢复，最好的方法是定义我的页面的CSS，以便所有内容都包含在页眉和页脚之间（如果图片太大，则会调整大小，不允许滚动）。

Answer 1

你问了很多不同的事情但是我会试一试帮助你。

我通常用于这种设计的是以下结构：

<div class="wrapper">
  <div class="header-row">
   <div class="header">
     header content
   </div>
  </div>
  <div class="content-row">
   <div class="content">
     content
   </div>
  </div>
  <div class="footer-row">
   <div class="footer">
     footer content
   </div>
  </div>
</div>

和CSS：

.wrapper {
  display:table;
  table-layout:fixed;
  width:100%;
  height:100%;
}
.header-row,
.footer-row {
  display:table-row;
  height:1px;
}
.content-row {
  display:table-row;
  height:100%;
}
.header,
.footer,
.content {
  display:table-cell;
}

以上代码的作用是：包装器覆盖整个屏幕;这些行将表格分类为高度，因此通过使用页眉和页脚行的1px高度和内容的100％，页眉和页脚行将拉伸以适合其内容，而其余行屏幕的内容是留给内容的。此外，由于表格是灵活的，如果内容超出屏幕高度，它也只是拉伸父容器。

上述解决方案将消除您在问题中提到的所有其他问题 - 可能必须使用媒体查询更改移动徽标尺寸，但您不必担心总体布局。

这是一个jsfiddle： https://jsfiddle.net/pdczopkk/