我有一个简单的2列布局,带有一个脚注,可以清除标记中的左右div。我的问题是,我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚,它就会起作用,但情况并不总是如此。
当前回答
一个快速简单的解决方案,使用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>
其他回答
由于Grid解决方案还没有给出,下面是它,如果我们将height: 100%和margin: 0视为理所当然,则只对父元素进行了两个声明:
html, body {height: 100%} body { display: grid; /* generates a block-level grid */ align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */ margin: 0; } .content { background: lightgreen; /* demo / for default snippet window */ height: 1em; animation: height 2.5s linear alternate infinite; } footer {background: lightblue} @keyframes height {to {height: 250px}} <div class="content">Content</div> <footer>Footer</footer>
align-content:之间的空间
项目沿对齐容器均匀分布 横轴。每对相邻项之间的间距为 相同。第一项与主启动边齐平,最后一项与主启动边齐平 项目与主端边缘齐平。
要获得一个粘性页脚:
为你的内容设置一个<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 */
}
我自己有时也与此斗争,我总是发现所有这些div在彼此之间的解决方案是一个混乱的解决方案。 我只是胡乱摆弄了一下,我个人发现这是有效的,而且这当然是最简单的方法之一:
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
我喜欢这样做的原因是不需要应用额外的HTML。您可以简单地添加这个CSS,然后编写您的HTML
尝试在内容和侧栏周围放置容器div(带有overflow:auto)。
如果这不起作用,您是否有任何页脚显示不正确的截图或示例链接?
一个解决方案是为盒子设置最小高度。不幸的是,IE似乎并没有很好地支持它(意外)。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?