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

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

当前回答

查看http://1linelayouts.glitch.me/，示例4。Una Kravets解决了这个问题。

这将创建一个带有页眉、主页和页脚的3层页面。

-你的页脚将始终停留在底部，并使用空间来适应内容;

-你的标题将始终保持在顶部，并使用空间来适应内容

-你的主系统总是会使用所有可用的剩余空间(剩余的部分空间)，如果需要，足够填满整个屏幕。

HTML

<div class="parent">
  <header class="blue section" contenteditable>Header</header>
  <main class="coral section" contenteditable>Main</main>
  <footer class="purple section" contenteditable>Footer Content</footer>
</div>

CSS

.parent {
  display: grid;
  height: 95vh; /* no scroll bars if few content */
  grid-template-rows: auto 1fr auto;
}

2021-01-18 12:26:32

其他回答

设置#页脚的CSS为:

position: absolute;
bottom: 0;

然后，您需要在#边栏和#内容的底部添加填充或边距，以匹配#footer的高度，或者当它们重叠时，#footer将覆盖它们。

此外，如果我没记错的话，IE6在底部有一个问题:0 CSS。你可能不得不为IE6使用JS解决方案(如果你关心IE6的话)。

2008-09-03 19:01:58

一个解决方案是为盒子设置最小高度。不幸的是，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

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

如果你正在寻找一个在页面底部对齐的响应性页脚，它总是保持视口高度的80%的上距，那么这个方法应该是有用的。

2014-12-21 06:23:14

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

推荐文章

最新文章

标签