html - 仅限 CSS - 带有滚动条的动态标题高度和 100% 内容高度-6ren

html - 仅限 CSS - 带有滚动条的动态标题高度和 100% 内容高度

转载作者：可可西里更新时间：2023-11-01 13:39:55

目标是滚动条不被动态高度标题隐藏。

stackoverflow上有很多关于CSS高度100%的帖子；我的问题有点独特，如果是骗人的，请见谅，但我找不到答案。

所以我的网络应用程序需要垂直滚动条 + 高度 100%，以及动态标题高度。 header 的高度未知，因此内容区域的高度应为 100%-header 高度。

我无法弄清楚如何优雅地解决的问题是，如果您对其执行 height:100% 并且标题向上，内容垂直滚动条(尤其是底部向下滚动按钮)将被隐藏顶部。 (高度 >100% 并不理想)。

<style>
  html{
    height:100%;
  }
  body{
    height:100%;
    margin:0px;
    padding:0px;
    overflow:hidden;
  }
  #header{
    background:blue;
  }
  #content{
    background:red;
    overflow-y:scroll;
    height:100%;
  }
</style>

<body>
  <div id='header'>
    dynamic height top. (Text here could be any length.)
  </div>
  <div id='content'>
    100% with no-hidden scroll-down scrollbar button.
  </div>
</body>

这可以在没有 JavaScript 和没有 HTML/CSS 表格的情况下完成吗？ (我在使用 css 表格时遇到了 colspan 问题，使用 html 表格进行布局似乎是不好的做法)

想知道 CSS/HTML 大师是否有答案。

http://jsbin.com/ijoqe4/ <-- 在这里查看隐藏的底部滚动按钮

http://jsbin.com/ijoqe4/edit <-- 在 jsbin 中编辑

感谢任何见解。 :)

最佳答案

据我所知，对于动态 header ，在纯 CSS 中无法做到这一点。您的问题源于您:

希望 header 是动态的，因此容器必须相应地是动态的
要根据 header 动态调整容器的位置，您需要一个 block 级 header ，其下方有一个 block 级容器。<
让容器拉伸(stretch)到窗口底部的唯一方法是设置 position: absolute;顶部:0； bottom: 0;，其中 bottom 指的是窗口的底部。但是您需要 top 来引用头部的底部，而不是窗口的顶部(bottom 所引用的元素)。

因此，由于在纯 CSS 中不可能根据两个不同的其他元素调整元素的位置，因此您必须使用 javascript 解决方案或使用表格。悲伤，但真实。

但是，尽管用于设计的表格通常被视为禁忌，但在这种情况下，这将是您最好和最干净的选择，而且从技术上讲，它仍然只是 HTML 和 CSS。

关于html - 仅限 CSS - 带有滚动条的动态标题高度和 100% 内容高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5843943/

文章推荐： javascript - 清理稍后将出现在 HTML 中的输入

文章推荐： php - 验证失败后输入中的 Laravel 重置值？

文章推荐： javascript - 根据文本输入的值添加

首页

博学

6Ren·AI

商城

html - 仅限 CSS - 带有滚动条的动态标题高度和 100% 内容高度