gpt4 book ai didi

CSS - 隐藏在页面底部的 div 但可见标题

转载 作者:太空宇宙 更新时间:2023-11-03 18:06:26 25 4
gpt4 key购买 nike

所以我有一个 div,我想将其放置在页面底部,div 的主体完全隐藏在用户视口(viewport)下方,除了固定在页面底部的整个标题。

约束:

  1. 整个 div 的高度是动态的,因为里面可以有任意数量的元素
  2. div 的 header 在语法方面完全包含在 div 中

理想情况下,我希望完全使用 CSS 完成此操作,但如果需要一点 JavaScript,那也很好。

关于如何做到这一点有什么想法吗? position: fixedbottom: (height of header - height of div) 不起作用,因为当您调整视口(viewport)大小时 div 的高度会发生变化。

the thing i want to do

最佳答案

想通了。这是我的解决方案。关键是要有一个与要突出的 header 高度相同的包装器,并将位置固定和底部 0 应用到该父包装器。

html

<html>
<body>
<div class="wrapper">
<div class="wrapper-top">
</div>
<div class="wrapper-bottom">
This can be variable height
<div>
</div>
</body>
</html>

CSS

.wrapper {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}

.wrapper-top {
height: 50px;
width: 100%;
}

关于CSS - 隐藏在页面底部的 div 但可见标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24563880/

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