仅使用CSS - 动态标题高度和具有滚动条的100％内容高度

Question

仅使用CSS - 动态标题高度和具有滚动条的100％内容高度

htmlcssweb-applicationsheightfullscreen

3

目标是使滚动条不会在动态高度的页眉中隐藏。

关于 CSS 高度为 100% 的问题，stackoverflow 上有很多帖子。我的问题有点独特，所以如果这是一个重复的问题，请原谅，但我找不到答案。

因此，我的 Web 应用程序需要垂直滚动条 + 高度为 100%，并且具有动态页眉高度。页眉的高度未知，因此内容区域的高度应为 100%-页眉高度。

我无法优雅地解决的问题是，如果对其进行 height:100%，则内容垂直滚动条（特别是底部向下滚动按钮）将被隐藏，并且页眉位于顶部。（height>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中编辑

感谢任何见解。 :)

- Quang Van

2

表格有什么问题吗？它们是有效的HTML，而且可以很容易地解决你的问题，无需任何复杂的技巧。 - Thomas Shields

我感到非常困惑。你发布的示例似乎完全符合你所要求的。你能否说明一下你当前尝试与期望效果之间的区别？ - cwharris

@Thomas，实际上我也尝试使用表格来做，但是它并没有起作用。 - Quang Van

@Xixonia，我想做的是让滚动条底部的下拉按钮不被覆盖...在Chrome和Firefox中，如果您在底部使用高度100％，并且顶部具有动态标题高度，则底部滚动按钮（以及取决于顶部标题高度的滚动条的大部分）将被隐藏，因此我想知道是否有一种纯CSS的方法来做到这一点，同时仍然显示整个滚动条。 - Quang Van

2个回答

0

或许尝试将你的html和body高度设置为98%，而不是100%。你已经禁用了body的overflow，所以使用100%的div超出了浏览器大小。

- robx

嗨，robx，感谢回复。是的，那是一个选项...但是我内心的强迫症无法忍受浪费那些宝贵的像素...(在底部/中心Div的末尾和视口底部之间的像素) :/ 人们状态栏的高度可能不同，顶部的动态高度也可能不同... - Quang Van

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Herman Schaaf · Accepted Answer

据我所知，使用纯CSS无法实现动态标题。您的问题源于以下原因：

希望标题是动态的，因此容器必须相应地动态调整
要使容器的位置根据标题动态适应，需要一个块级标题，并在其下方放置一个块级容器。
唯一的方法是将position: absolute; top:0; bottom: 0; 设置为容器，其中bottom指的是窗口底部。但您需要top指的是标题底部，而不是窗口顶部（即元素bottom所指的位置）。

因此，由于在纯CSS中不可能使元素根据两个不同的其他元素调整位置，您需要使用javascript解决方案或使用表格。这很遗憾，但却是事实。

但是，尽管通常认为表格用于设计是禁忌的，但在这种情况下，它仍然是您最佳和最干净的选择，并且从技术上讲，它仅涉及HTML和CSS。