gpt4 book ai didi

html - 设置相对于 parent parent 的高度但拉伸(stretch) parent

转载 作者:搜寻专家 更新时间:2023-10-31 08:43:21 28 4
gpt4 key购买 nike

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

div#page 的高度应该调整,以便 footer 紧跟在最后一个 div#page> 部分 之后。

然而,为了能够为 div#page > section 标签设置一个百分比值,我给 div#page 设置了 100% 的高度。因此,它的 DOM 高度不会拉伸(stretch)。

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

是否有一些神奇的 CSS 解决方案可以正确拉伸(stretch) 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>

最佳答案

如果您降低 #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>

关于html - 设置相对于 parent parent 的高度但拉伸(stretch) parent ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33011481/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com