一个 100vh 高度 div 包含 3 divs，其中第二个应该是唯一一个具有可变高度的

Question

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

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

必选

如您所见，一旦浏览器 window 变得相当高，#header 和 #footer 正确地停止增长，将它们的高度留给背景红色 #main div。我需要的是 #article 得到这个 space，因此总是 "pushing" 浏览器屏幕下边框的 #footer。

可选

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

非常感谢:)

Answer 1

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

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

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

Answer 2

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

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

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

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

我不了解背景知识，但您的目标听起来确实非常可行 CSS 参数，例如 background-repeat 和 background-size；您需要查看参考指南，例如 Mozilla Developer Wiki 上的指南。

Answer 3

页脚和页眉的百分比高度以及最大高度使得使用起来非常困难（或者至少使用我为此使用的技术）。我将 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 来测试它： Fiddle

一个 100vh 高度 div 包含 3 divs，其中第二个应该是唯一一个具有可变高度的

One 100vh height div containg 3 divs, the 2nd of which should be the only one with variable height

html

css

height

fixed

stretching