Question

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

关于CSS高度100％的stackoverflow上有很多帖子;我的问题有点独特，所以如果它是一个骗局的借口，但我找不到答案。

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

我无法弄清楚如何优雅地解决的问题是内容垂直滚动条（尤其是底部向下滚动按钮）如果你做了一个高度就会被隐藏：100％就可以了，标题是up最佳。（高度> 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/＆lt; - 请点击此处隐藏的底部滚动按钮

http://jsbin.com/ijoqe4/edit＆lt; - 在jsbin中编辑

感谢您的任何见解。：）

Answer 1

使用动态标头，据我所知，在纯CSS中无法做到这一点。您的问题源于您：

希望标题是动态的，因此容器必须是相应的动态
要使容器的位置根据标题动态调整，您需要一个block级别的标头，其下方有一个block级容器。
将容器拉伸到窗口底部的唯一方法是设置position: absolute; top:0; bottom: 0;，bottom指向窗口的底部。但是你需要top来引用头部的底部，而不是窗口的顶部（这是bottom所指的元素）。

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

但是，即使用于设计的表通常被视为禁忌，在这种情况下它将是您最好和最干净的选择，并且它仍然是 - 技术上 - 仅HTML和CSS。

Answer 2

也许尝试将你的html，身高设置为98％而不是100％。您已禁用身体溢出，因此使用100％的div超出了浏览器大小。

仅限CSS - 动态标题高度＆amp;滚动条100％内容高度

2 个答案: