如何让页脚保持在网页的底部?

我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。

当前回答

要获得一个粘性页脚:

为你的内容设置一个<div> with class="wrapper"。在包装器的</div>结束之前放置 < div class = "推" > < / div >。在包装器的</div>结束后放置 < div class = "脚注" > < / div >。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

2008-09-03 18:55:18

其他回答

一个解决方案是为盒子设置最小高度。不幸的是，IE似乎并没有很好地支持它(意外)。

2008-09-03 18:55:54

尝试在内容和侧栏周围放置容器div(带有overflow:auto)。

如果这不起作用，您是否有任何页脚显示不正确的截图或示例链接?

2008-09-03 18:55:48

一个快速简单的解决方案，使用flex

将html和body的高度设置为100%

html,
body {
  width: 100%;
  height: 100%;
}

将主体显示为具有列方向的flex:

body { 
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

为main添加flex-grow: 1

main {
  flex-grow: 1;
}

flex-grow指定应将伸缩容器中剩余空间的多少分配给项(伸缩增长因子)。

*, *::after, *::before{ margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } main { flex-grow: 1; } footer{ background-color: black; color: white; padding: 1rem 0; display: flex; justify-content: center; align-items: center; } <body> <main> <section > Hero </section> </main> <footer > <div> <p > © Copyright 2021</p> </div> </footer> </body>

2021-11-16 11:35:18

保持<main>为min-height 90vh将永远解决您的问题。下面是基本结构，它将帮助您遵循语义并覆盖整个页面。

第一步:除了页眉和页脚，所有内容都放在主标签内。

<body>
    <header>
        <!╌ nav, logo ╌> 
    </header>
    <main>
        <!╌ section and div ╌> 
    </main>
    <footer>
        <!╌ nav, logo ╌>
    </footer>
</body>

步骤2:添加min-height: 90vh为主

main{
    min-height: 90vh;
}

通常，页眉和页脚的最低高度是70px，所以这种情况下工作良好，尝试和测试!

2022-08-11 18:51:25

对我来说，最好的显示它(页脚)的方式是粘在底部，但不覆盖所有的内容:

#my_footer {
    position: static
    fixed; bottom: 0
}

2017-11-25 18:34:59

如何让页脚保持在网页的底部?

推荐文章

最新文章

标签