gpt4 book ai didi

css - div height 同时最小浏览器高度和内部内容高度

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

我正在寻找解决我的 CSS 问题的方法。这是 Drupal 主题,所以内容会有不同的高度。我已将页脚固定在底部,结构如下

<body>
<div class="page-container">

<div class="header">
</div>

<div class="content-container">

<div class="content-insider">
Different kind of content here
</div>

</div>
</div>

<div class="footer">
</div>
</body>

我需要 content-container 和 content-insider 的高度至少是浏览器窗口的高度,同时也是内部内容的高度。这是需要一直扩展到底部的背景。我已经尝试了一些解决方案(也来自 stackoverflow ),但它们仅在内容短于浏览器高度时才有效。如果有更多内容,当您向下滚动时,content-insider 会在到达浏览器底部之前中断。

最佳答案

这是粘性页脚的情况。您可以用谷歌搜索或继续阅读。

  1. 将 .page-container 的最小高度设置为 100%;
  2. 将其 box-sizing 属性更改为 border-box,以便通过添加一些 padding padding,其高度保持等于 100% vs 100% + padding。然后,完成后,添加一个等于 .footer 高度的填充底部;
  3. 通过设置一个等于页脚高度的负 margin-top 来拉起页脚。

就是这样。这是一个 fiddle ,您可以看到它的实际效果:http://jsfiddle.net/joplomacedo/MqzGt/

关于css - div height 同时最小浏览器高度和内部内容高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11387548/

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