Question

尝试在页面底部修复页脚时出现问题，如下图所示：

虽然我谷歌并看到很多建议，但我仍然面临着这个问题。我怀疑这个问题是Console.Write("Hi, if you wish to see a movie please enter your age: "); string AgeAsAString = Console.ReadLine(); int Age = (int)Convert.ToInt32(AgeAsAString); List<String> ilist = new List<String>(); ilist.Add("Made in Daghenham"); ilist.Add("Buried"); ilist.Add("Despicable Me"); ilist.Add("The Other Guys"); ilist.Add("Takers"); string combindedString = string.Join(",", ilist); { if (Age >= 18) Console.Write(combindedString); else if (Age < 18) Console.Write() Console.ReadKey();不能将身高100％设置为父母。谁能帮助我？

提前致谢！

更新：页脚样式：

<div data-reactroot></div>

Answer 1

您需要告诉您的页脚将自己定位到周围容器的底部：

页脚css：

position:absolute;
left:0;
bottom:0;
right:0;

对于容器（react-root div）：

padding-bottom:60px;

作为替代方案（如果您不需要支持IE 8），您可以在div.container上尝试这种风格：

height: calc(100% - 60px);

Answer 2

您是否正在尝试为页面设置包装器，以便您可以将页脚完全放在底部？如果是这样，您可以创建一个具有相对位置的新组件，并将其他组件作为子项传递，并将页脚绝对定位在底部。

Answer 3

对于上述解决方案不起作用的任何其他人，您可以尝试以下步骤：

给父级 div一个非静态的position，例如relative（请记住默认的position是static）
将父级格的最小高度设为100vh；这样可以垂直占用所有可用空间
然后将页脚（子）（如果没有）包装在div中，则应赋予其以下属性； position: absolute; bottom: 0; width: 100%

希望上述步骤可以解决该问题：-）

Answer 4

希望我早点读过。以下是Ikechuk答案的摘要，请注意，现在footer也尊重页边距（上面的其他答案中可能没有）：

html, body, div{
      height:100%;
      width:100%
      display:block;
    }
    footer{
      position:absolute;
      bottom:0;
      display:block;  
      width:100%
      
 }
 hr{
      display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
 }

<html>
<body>

<div style={"margin=5%;"}>
<div style={"position:relative"}>
<footer>
  <hr>
  I am footer
</footer>

</div>
</div>
</body>
</html>

Answer 5

我相信这里每个人都缺少的一个技巧是在React中，在html和body元素之后，还有一个 #root 的div，它包围了整个内容。请参考下图。

因此，要求将所有3个高度（即html，body和#root）的高度设置为100％。

html, body, #root {
  height: 100%;
}

然后将这些属性添加到#root中：

#root {
 display: flex;
 flex-direction: column;
}

您必须怀疑为什么#root需要灵活而不是主体。原因是它是最里面的父级，或者我应该说是页脚的最接近的父级。

现在，最后只需为页脚执行此操作即可：

footer: { margin-top: auto }

以上行的作用是将页脚推到其父级的末尾。就如此容易。这里没什么好看的。无需进行任何高度计算或更改页脚的位置。

在页面底部反应页面保持页脚

5 个答案: