Html 不在车身上工作的最小高度_Html_Css

Html 不在车身上工作的最小高度

html css

Html 不在车身上工作的最小高度,html,css,Html,Css,我对最小身高有一些问题：100% 我希望页脚始终位于我的内容下方。也就是说，如果内容长度超过屏幕高度，在滚动到底部之前，您不会看到页脚此外，当内容短于屏幕高度时，页脚需要位于屏幕底部。好吧，我想我只是通过增加最小高度来解决这个问题：100% 现在，出于某种原因，body标记似乎忽略了此设置，其高度完全符合内容不幸的是，你不能将身体设置为100% 有什么建议可以解决这个问题吗？神奇的网站在他们的区域有一个粘性页脚的片段：或者使用jQuery：与演示的最新链接或者，您也可以简单地使用来自

我对最小身高有一些问题：100%

我希望页脚始终位于我的内容下方。也就是说，如果内容长度超过屏幕高度，在滚动到底部之前，您不会看到页脚

此外，当内容短于屏幕高度时，页脚需要位于屏幕底部。好吧，我想我只是通过增加最小高度来解决这个问题：100%

现在，出于某种原因，body标记似乎忽略了此设置，其高度完全符合内容

不幸的是，你不能将身体设置为100%

有什么建议可以解决这个问题吗？

神奇的网站在他们的区域有一个粘性页脚的片段：

或者使用jQuery：

与演示的最新链接

或者，您也可以简单地使用来自

因此，只需将HTML和CSS更改为：

HTML

我修改了css，将页脚和文章放在相对位置：

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

article {
  height: calc(100% - 50px);
  position: relative;
}

main {
  background-color:lightgray;
}
footer {
  background-color: green;
  height: 50px;
  position: relative;
  bottom: 0;
  width: 100%;
}

小提琴：

如果您不想干扰定位，可以使用vh装置。 1vh等于视口高度的1%

作为参考，这是一本很好的读物：

小提琴：

CSS

粘性页脚“hack”通常使用页脚父元素上的最小高度和负边距底部来完成。所有父元素直到根html，都需要有高度：100%

* { 框大小：边框框；保证金：0；填充：0； } /*浏览器重置*/ html{ 身高：100%；位置：相对位置；最小高度：100%：填充底部：50px； /*等于页脚高度*/ } 身体{ 身高：100%；颜色：fff； } 页脚{ 位置：绝对位置；左：0；右：0；底部：0；宽度：100%；高度：50px；背景：ccc； } 标题{ 背景：333人； } 主要{ 背景：番茄； } 菜单未知高度的内容！！页脚始终位于底部您可以使用display:flex执行以下操作：

html，身体{ 填充：0；保证金：0；身高：100% } 主要{ 最小高度：100%；显示器：flex；弯曲方向：立柱；背景：蓝色； } 文章{ 柔性生长：1；背景：绿色； } 页脚{ 背景：橙色； } ... ...

可能重复或更新的答案被接受的答案在IE10及更低版本中不起作用。。。谢谢你指出这一点。它需要前缀！但是我必须补充一点，我仍然不明白为什么我的演示不能像预期的那样工作。这在IE10和更低版本中是行不通的@Legionar应该在ie10中工作-可能需要厂商前缀：也不需要下一票-问题没有规定这需要为哪个浏览器工作，就我所见，我的是唯一一个允许可变高度页脚的浏览器。此外，如果您需要它在ie9或更低版本中工作，我在评论中提供了一些链接，这些链接的答案将在ie9或更低版本中工作。请添加前缀，我会同意您的意见。谢谢

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <main>
        <article> .... </article>
    </main>
    <footer> ... </footer>
</body>
</html>

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px; /* bottom = footer height */
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

article {
  height: calc(100% - 50px);
  position: relative;
}

main {
  background-color:lightgray;
}
footer {
  background-color: green;
  height: 50px;
  position: relative;
  bottom: 0;
  width: 100%;
}

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

html, body {
  min-height: 100vh; /* Minimum height is the full viewport */
}

article {
  min-height: calc(100vh - 50px); /* Minimum height is the viewport height minus the footer */
}

main {
  background-color:lightgray;
}

footer {
  background-color: green;
  height: 50px;
}

article{
  //height: calc(100% - 50px);
  min-height: 100%;
  background: yellow;
  padding-bottom: 50px;
  margin-bottom:-50px;
}