设置相对于父级父级的高度，但是拉伸父级

This HTML structure has a div#page, in which the current page content will be loaded via Ajax. The content always consists of section tags, which can have a dynamic height (in percent relative to the browser) or a static height (in pixels).

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

The height of div#page should adjust, so that the footer will follow immediately after the last div#page > section.

div＃page的高度应该调整，以便页脚将紧跟在最后一个div＃page>部分之后。

To be able to set a value in percent for the div#page > section tags however, I gave div#page a height of 100%. Therefore, it's DOM height won't stretch.

但是，为了能够为div＃page> section标签设置百分比值，我给div #page高度为100％。因此，它的DOM高度不会拉伸。

If the footer tag was inside div#page, it would work. This is not a good solution for me, because the footer would be overwritten by the dynamicaly loaded page content.

如果页脚标记位于div #page内，则可以正常工作。这对我来说不是一个好的解决方案，因为页脚会被动态加载的页面内容覆盖。

Is there some magic CSS solution to stretch the div#page properly?

是否有一些神奇的CSS解决方案可以正确地拉伸div＃页面？

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>

2 个解决方案

#1

If you drop the height for the #page div and set the first section to 100vh I guess it will work as you want, though with newer browsers only, that support the "viewport" unit vh.

如果你删除#page div的高度并将第一部分设置为100vh，我猜它会按你的意愿工作，虽然只有较新的浏览器，它支持“viewport”单元vh。

Browser support: http://caniuse.com/#feat=viewport-units

浏览器支持：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>

#2

hi i tried to resolve this way by changing the position of the outer div

嗨我试图通过改变外部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; }

i have included the working demo code so that you can check out put is it as you expect or not ..

我已经包含了工作演示代码，以便您可以按照您的预期检查出来。

Demo Code you can check out

您可以查看演示代码

#1