Html 仅CSS-动态收割台高度&；带滚动条的100%内容高度_Html_Css_Web Applications_Height_Fullscreen

Html 仅CSS-动态收割台高度&；带滚动条的100%内容高度

html css web-applications

Html 仅CSS-动态收割台高度&；带滚动条的100%内容高度,html,css,web-applications,height,fullscreen,Html,Css,Web Applications,Height,Fullscreen,目的是使滚动条不被动态高度标题隐藏 stackoverflow上有很多帖子，大约CSS高度100%；我的问题是独一无二的，所以请原谅，如果这是一个骗局，但我找不到答案因此，我的web应用程序需要垂直滚动条+高度100%和动态标题高度。标题的高度未知，因此内容区域的高度应为100%-标题高度我不知道如何优雅地解决的问题是，如果你做一个高度：100%在上面，标题在上面，内容垂直滚动条（尤其是底部向下滚动按钮）会被隐藏。（高度>100%并不理想） html{ 身高：100%； } 身体{ 身高：

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

stackoverflow上有很多帖子，大约CSS高度100%；我的问题是独一无二的，所以请原谅，如果这是一个骗局，但我找不到答案

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

我不知道如何优雅地解决的问题是，如果你做一个高度：100%在上面，标题在上面，内容垂直滚动条（尤其是底部向下滚动按钮）会被隐藏。（高度>100%并不理想）


html{
身高：100%；
}
身体{
身高：100%；
边际：0px；
填充：0px；
溢出：隐藏；
}
#标题{
背景：蓝色；
}
#内容{
背景：红色；
溢出y：滚动；
身高：100%；
}
动态高度顶部。（此处的文本可以是任意长度。）
100%无隐藏的向下滚动滚动条按钮。

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

不知道CSS/HTML专家是否有答案

就我所知，对于动态标题，在纯CSS中无法做到这一点。您的问题源于以下事实：

如果希望标头是动态的，则容器必须是动态的
要使容器的位置根据标头动态调整，需要一个
```
块
```
级标头，其下方有一个
```
块
```
级容器

将容器拉伸到窗口底部的唯一方法是设置

位置：绝对；排名：0；底部：0，其中底部
指窗口的底部。但是您需要top
来表示头部的底部，而不是窗口的顶部（即bottom
所指的元素）


因此，由于在纯CSS中不可能针对其他两个不同的元素调整一个元素的位置，因此您必须使用javascript解决方案，或者使用表。悲伤，但真实
但是，即使用于设计的表格通常被视为一种禁忌，在这种情况下，它将是您最好、最干净的选择，而且从技术上讲，它仍然只是HTML和CSS。
也许可以尝试将您的HTML、身高设置为98%，而不是100%。您已禁用正文溢出，因此使用100%的div超出了浏览器大小。
表格有什么问题？它们是有效的HTML，可以很容易地解决您的问题，而无需任何复杂的破解。我非常困惑。你发布的Exmaple似乎给了你所描述的你想要的东西。您能说明一下您当前的尝试与预期效果之间的差异吗？@Thomas，实际上我也尝试过使用表格，但没有效果。@Xixonia，我要做的是使滚动条底部的向下滚动按钮不被覆盖。。。在Chrome&Firefox中，如果你在底部设置100%高度，顶部设置动态标题高度，那么底部滚动按钮（以及一大块滚动条，取决于顶部标题的高度）就会被隐藏，所以我想知道是否有一种纯粹的CSS方式来实现这一点，同时仍然显示所有滚动条。嗨，robx，谢谢你的回复。是的，这是一个选择。。。但我内心的强迫症无法忍受浪费这些宝贵的像素。。。（位于底部/中心Div末端和视口底部之间的区域）：/并且人们的状态栏的高度可能不同，顶部的动态高度也可能不同……感谢Herman的解释，为了得到它，他不得不读了几遍。。。这总是最简单的事情，似乎是最令人困惑的，哈。我会咬紧牙关，使用JavaScript。。。（我甚至无法使用css表或reg表使滚动条正常工作）JavaScript似乎是最好的选择。赫尔曼：我认为你的信息是正确的，但你的第三点（如果我理解正确的话）并不完全是，不使用position:absolute:html，body，#content{height:100%；}就可以使元素具有100%的高度将导致#content元素为窗口高度的100%：需要注意的是，DOM树上的所有父元素都必须有一个显式高度。@jacob您的确是对的，按照您的建议做是制作粘性页脚和页眉的常见解决方案。现在想想，也许有一种方法可以做到这一点，100%的高度和负的利润率（也是基于百分比的吗？），但我不确定这种解决方案在任何情况下，如果可行的话，会有多“动态”。值得一试@HermanSchaaf mm，即（基于百分比的边距等于基于百分比的页眉/页脚高度）将更具动态性，但遗憾的是，不会得到人们想要的最终效果（边距实际上会根据内容进行调整，迫使页眉/页脚高度增加）。为什么这么难(
<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>