将高度设置为相对于父元素的父元素，但是拉伸父元素。

Question

这个 HTML 结构包含一个名为 div#page 的元素，当前页面的内容会通过 Ajax 加载到该元素中。内容始终由 section 标签组成，这些标签可以具有动态高度（相对于浏览器的百分比）或静态高度（以像素为单位）。

div#page 的高度应调整，以使 footer 立即跟随在最后一个 div#page > section 标签后面。

然而，为了能够为 div#page > section 标签设置百分比值，我将 div#page 的高度设为 100％。因此，它的 DOM 高度不会伸展。

如果将 footer 标签放在 div#page 中，这种方法也可以实现。但这对我来说不是一个好的解决方案，因为 footer 会被动态加载的页面内容覆盖。

是否有某种神奇的 CSS 解决方案可以正确地拉伸 div#page？

body, html { margin: 0; padding: 0; }
#outer { background: red; position: absolute; width: 100%; height: 100%; }
#page { height: 100%; }

#page > section { background: #666; width: 100%; }
#page > section:nth-of-type(2n) { background: #333; }
#page > section:nth-of-type(1) { height: 100%; }
#page > section:nth-of-type(2) { height: 160px; }
#page > section:nth-of-type(3) { height: 220px; }
#page > section:nth-of-type(4) { height: 120px; }

footer { background: green; height: 160px; }

<div id="outer">

    <!-- The current page content will be loaded into this div. -->
    <div id="page">
      <section>Full height.</section>
      <section>Static height 1.</section>
      <section>Static height 2.</section>
      <section>Static height 3.</section>
    </div>

    <!-- The footer is static and therefore not inside of the #page div. -->
    <footer>
      Immediately after static height 3.
    </footer>
  </div>

- Christoph Bühler

---

@maioman，如果父元素设置了min-height，则无法真正使用相对高度。请参阅此答案：https://dev59.com/6GMl5IYBdhLWcg3w_bDj - Christoph Bühler

Answer 1

如果您将#page div的高度减小并将第一个section设置为100vh，我想它会按照您的要求工作，但只有支持"viewport"单位vh的新版本浏览器才能这样做。

浏览器支持情况: http://caniuse.com/#feat=viewport-units

  body, html { margin: 0; padding: 0; }
  #outer { background: red; position: absolute; width: 100%; height: 100%; }
  #page { }

  #page > section { background: #666; width: 100%; }
  #page > section:nth-of-type(2n) { background: #333; }
  #page > section:nth-of-type(1) { height: 100vh; }
  #page > section:nth-of-type(2) { height: 160px; }
  #page > section:nth-of-type(3) { height: 220px; }
  #page > section:nth-of-type(4) { height: 120px; }

  footer { background: green; height: 160px; }

<div id="outer">

    <!-- The current page content will be loaded into this div. -->
    <div id="page">
      <section>Full height.</section>
      <section>Static height 1.</section>
      <section>Static height 2.</section>
      <section>Static height 3.</section>
    </div>

    <!-- The footer is static and therefore not inside of the #page div. -->
    <footer>
      Immediately after static height 3.
    </footer>
  </div>

- Asons

Answer 2

嗨，我尝试通过改变外部div的位置来解决这个问题。

body, html { margin: 0; padding: 0; }
  #outer { background: red; position: relative; width: 100%; height: auto; }
  #page { height: 100%; }

  #page > section { background: #666; width: 100%; }
  #page > section:nth-of-type(2n) { background: #333; }
  #page > section:nth-of-type(1) { height: 100%;background: red; }
  #page > section:nth-of-type(2) { height: 160px;background: yellow; }
  #page > section:nth-of-type(3) { height: 220px;background: aqua; }
  #page > section:nth-of-type(4) { height: 120px;background: darkblue; }

  footer { background: green; height: 160px; }

我已经包含了工作演示代码，这样你就可以检查输出是否符合你的期望了。。 演示代码你可以查看" >

- Himesh Aadeshara

---

@ChristophBühler 请检查一下答案是否有效？ - Himesh Aadeshara

红色容器应该占据页面高度的100％。目前它没有达到这个要求。 - Christoph Bühler