我有一个问题，当尝试修复页脚在页面底部，如下图：
虽然我在谷歌上看到了很多建议，但我仍然面临着这个问题。我怀疑这个问题是<div data-reactroot></div>不能100%设置高度作为它的父母。有人能帮助我吗？先谢了!
<div data-reactroot></div>
borderTop: '1px solid #ddd', height: '60px', lineHeight: '60px', backgroundColor: 'white'
jum4pzuy1#
你需要告诉你的页脚把自己定位到周围容器的底部：页脚CSS：
position:absolute; left:0; bottom:0; right:0;
对于容器（react-root div）：
padding-bottom:60px;
作为一种替代方案（如果您不需要支持IE 8），您可以在div.container上尝试这种风格：
div.container
height: calc(100% - 60px);
8dtrkrch2#
对于任何其他人，上述解决方案不工作，你可以尝试以下步骤：1.给予父div一个非静态的position，例如relative（记住默认的position是static）1.给予parentdiv一个最小高度100vh;这使得它能够垂直地占据所有可用空间1.然后对于页脚（child）（如果没有div，则应将其 Package 在div中），为其给予以下属性;position: absolute; bottom: 0; width: 100% .
div
position
relative
static
100vh
position: absolute; bottom: 0; width: 100%
UPDATE：在某些情况下，将页脚divposition设置为absolute可能不起作用。在这种情况下，请改用relative。
absolute
希望上面的步骤能解决这个问题：-）
olmpazwi3#
重要的是要有内容 Package 器，并将其最小高度设置为100vh：
min-height: 100vh; (100% of the viewport height) min-height: 100%; (100% of the parent's element height)
看这里是非常好的解释和工作对我来说：https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551
2g32fytz4#
我会改变页脚css如下：
position: fixed; left:0; bottom:0; right:0;
有一个position: absolute是可能的，但它不会滚动友好。
position: absolute
ctzwtxfj5#
我相信每个人都忽略了一个技巧，那就是在React after html和body元素中，还有一个包含了全部内容的div，它带有**#root**。请参考下图。
因此，需要使所有3个即html、body和#root的高度为100%。
html, body, #root { height: 100%; }
然后在#root中添加以下属性：
#root { display: flex; flex-direction: column; }
你一定想知道为什么#根需要是flex而不是body，原因是它是最里面的父对象，或者我应该说是页脚最近的父对象。现在，最后对页脚执行以下操作：
footer: { margin-top: auto }
上面这行代码所做的就是把页脚移到父对象的末尾。就这么简单。这里没有什么花哨的地方。不需要计算高度或者改变页脚的位置。
ddarikpa6#
您是否试图为页面设置一个 Package 器，以便将页脚绝对定位在底部？如果是这样，您可以创建一个具有相对位置的新组件，并将其他组件作为子组件传入，给予页脚绝对定位在底部。
bd1hkmkf7#
希望我能早点读到它。下面是Ikechuk答案的片段，请注意，现在footer也考虑了边距（这可能在上面的任何其他答案中都没有）：
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>
v440hwme8#
很晚的党，但我的解决办法是：
<div className="layout"> <Navbar /> <main> {children} </main> <Footer /> </div>
.layout { min-height: 100vh; display: flex; flex-direction: column; } .layout main { flex-grow: 1; }
zf9nrax19#
谢谢你，@mwoelk回答了这个问题。我只是想让初学者更清楚。第1步---页脚css：
.Footer { position: fixed; left: 0; bottom: 0; right: 0; }
步骤2 ---页脚css的 Package 器：（我们以React为例，通常footer会被 Package 在. app中，之所以添加padding bottom，是为了避免内容过长时，底部的Footer会覆盖部分内容。）
.App { padding-bottom: 60px; }
9条答案
按热度按时间jum4pzuy1#
你需要告诉你的页脚把自己定位到周围容器的底部：
页脚CSS：
对于容器（react-root div）：
作为一种替代方案（如果您不需要支持IE 8），您可以在
div.container上尝试这种风格：8dtrkrch2#
对于任何其他人，上述解决方案不工作，你可以尝试以下步骤：
1.给予父
div一个非静态的position，例如relative（记住默认的position是static）1.给予parentdiv一个最小高度
100vh;这使得它能够垂直地占据所有可用空间1.然后对于页脚（child）（如果没有
div，则应将其 Package 在div中），为其给予以下属性;position: absolute; bottom: 0; width: 100%.UPDATE：在某些情况下，将页脚
divposition设置为absolute可能不起作用。在这种情况下，请改用relative。希望上面的步骤能解决这个问题：-）
olmpazwi3#
重要的是要有内容 Package 器，并将其最小高度设置为100vh：
看这里是非常好的解释和工作对我来说：https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551
2g32fytz4#
我会改变页脚css如下：
有一个
position: absolute是可能的，但它不会滚动友好。ctzwtxfj5#
我相信每个人都忽略了一个技巧，那就是在React after html和body元素中，还有一个包含了全部内容的div，它带有**#root**。请参考下图。
因此，需要使所有3个即html、body和#root的高度为100%。
然后在#root中添加以下属性：
你一定想知道为什么#根需要是flex而不是body，原因是它是最里面的父对象，或者我应该说是页脚最近的父对象。
现在，最后对页脚执行以下操作：
上面这行代码所做的就是把页脚移到父对象的末尾。就这么简单。这里没有什么花哨的地方。不需要计算高度或者改变页脚的位置。
ddarikpa6#
您是否试图为页面设置一个 Package 器，以便将页脚绝对定位在底部？如果是这样，您可以创建一个具有相对位置的新组件，并将其他组件作为子组件传入，给予页脚绝对定位在底部。
bd1hkmkf7#
希望我能早点读到它。下面是Ikechuk答案的片段，请注意，现在
footer也考虑了边距（这可能在上面的任何其他答案中都没有）：v440hwme8#
灵活增长
很晚的党，但我的解决办法是：
zf9nrax19#
谢谢你，@mwoelk回答了这个问题。我只是想让初学者更清楚。
第1步---页脚css：
步骤2 ---页脚css的 Package 器：（我们以React为例，通常footer会被 Package 在. app中，之所以添加padding bottom，是为了避免内容过长时，底部的Footer会覆盖部分内容。）