html – 相对于父级父级设置高度但是拉伸父级

2019年7月22日 185次阅读

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

div#page的高度应该调整,以便在最后一个div #page>之后立即跟随页脚.部分.

为了能够为div#page设置百分比值>但是,我给div #page的高度为100％.因此,它的DOM高度不会拉伸.

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

是否有一些神奇的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>

最佳答案 如果你删除#page div的高度并将第一部分设置为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>
点赞