一个 100vh 高度 div 包含 3 个 div，其中第 2 个应该是唯一一个高度可变的 div答案

【问题标题】：One 100vh height div containg 3 divs, the 2nd of which should be the only one with variable height一个 100vh 高度 div 包含 3 个 div，其中第 2 个应该是唯一一个高度可变的 div
【发布时间】：2015-09-24 14:02:11
【问题描述】：

我对 CSS3 还是很陌生。我已经阅读了其他问题，但我不确定它们是否涵盖了我的情况，所以请耐心等待:)

我有这个示例页面：

<html>
 <head>
  <style type="text/css">
   body { background-color: black; margin: 0; }
   #main { background-color: red; width: 60%; height: 100vh; margin: auto; }
   #header { background-color: white; width: 100%; height: 25%; max-height: 100px; }
   #article { background-color: orange; width: 100%; height: 55%; }
   #footer { background-color: blue; width: 100%; height: 20%; max-height: 80px; }
  </style>
 </head>
 <body>
  <div id="main">
   <div id="header"></div>
   <div id="article"></div>
   <div id="footer"></div>
  </div>
 </body>
</html>

我必须实施一项额外的强制性行为，外加一项可选行为。

强制性

如您所见，一旦浏览器窗口变得相当高，#header 和#footer 就会正确停止增长，将它们的高度留给背景红色#main div。我需要的是#article 获得这个空间，因此总是将#footer“推”到浏览器屏幕的下边框。

可选的

布局本身水平调整大小，没有任何限制，但#article div 设置了一个背景图像，该图像在其左右两侧会淡化。更准确地说，它是一个 1000x1 的图像，从坐标 (1,1) 淡入到 (100,1) 并从 (901,1) 淡出到 (1000,1)，垂直重复以覆盖 #article 的高度。如何获得此图像仅在其非褪色区域拉伸的效果（以便褪色边框不会被拉伸）？我可以在没有任何额外 div 的情况下获得它吗（在这种情况下，强制行为会在水平方向上自我重复）？

非常感谢:)

【问题讨论】：

标签： html css height fixed stretching

【解决方案1】：

页脚和页眉的百分比高度以及最大高度使得使用起来非常困难（或者至少使用我为此使用的技术）。我将css更改为固定高度，即最大高度值。如果百分比高度是为了屏幕尺寸兼容性，您可以使用媒体查询。

以下是我将如何实现布局以及渐变背景图像，它仅使用 CSS，而不是图像：

body {
 background-color: black;
 margin: 0;


}
 #main {
     background-color: red;
     width: 60%;
     height: 100vh;
     margin: auto;
     position: relative;
 }
 #header {
     background-color: white;
     width: 100%;
     height: 100px;
 }
 #article {
     background-color: orange;
     width: 100%;
     top: 100px;
     bottom: 80px;
     position: absolute;
     background: rgb(179, 220, 237);
     /* Old browsers */
     background: -moz-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* FF3.6+ */
     background: -webkit-gradient(linear, left top, right top, color-stop(17%, rgba(179, 220, 237, 1)), color-stop(49%, rgba(41, 184, 229, 1)), color-stop(81%, rgba(188, 224, 238, 1)));
     /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* Opera 11.10+ */
     background: -ms-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* IE10+ */
     background: linear-gradient(to right, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1);
     /* IE6-9 */
 }
 #footer {
     background-color: blue;
     width: 100%;
     height: 80px;
     position: absolute;
     bottom: 0;
 }

以及我为测试它而创建的小提琴： Fiddle

【讨论】：

这是让我最接近目标的解决方案。谢谢

【解决方案2】：

CSS 中的动态垂直尺寸调整非常棘手，即使对于专业人士也是如此。据我所知，这就是我的做法；抱歉缺少代码示例，但如果有任何问题，我希望您了解它是如何组合在一起的，以便您知道如何修复它。

#header 和 #footer 使用 position: absolute 使自己脱离正常流程。正如你所说，它们需要一个绝对高度。

#article 的 padding-top 等于 #header 的高度。它还将 padding-bottom 设置为页脚的高度加上其边距，以便页脚的高度包含在集成高度计算中。它的高度设置为 100%，box-sizing 设置为border-box，这样当它试图保持在 100% 时，它包括填充（不是默认行为；通常它只计算实际内容）

如果您使用像 LESS 这样的 CSS 编译框架，其中一些更容易做到，以避免每次自己重新计算像素数量（更改一个边距，必须更改另一个高度和填充）

我对背景一无所知，但使用 background-repeat 和 background-size 等 CSS 参数，您的目标听起来确实很可行；您需要查看参考指南，例如 Mozilla Developer Wiki 上的参考指南。

【讨论】：

【解决方案3】：

只是想知道，您是否尝试过设置以下内容？

html,body { height:100%; }
#main { height:100%; }
#article { height:100%; }

这将强制 #article 与窗口高度相同。

【讨论】：

但是页脚会被推到视口下方，所以滚动条会一直存在，还是我错过了重点？
如果需要，您可以在#footer 上使用负边距来应对这种情况。
边距不会做任何事情，不是吗？假设您将应用保证金底部？小提琴：jsfiddle.net/7e8q2zuh