我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。
当前回答
使用绝对定位和z-index创建一个粘脚div在任何分辨率，使用以下步骤:
创建一个脚注div, position: absolute;底部:0;以及期望的高度 设置页脚的填充，以便在内容底部和窗口底部之间添加空白 创建一个容器div，用position: relative包装主体内容;最小高度:100%; 为主内容div添加底部填充，它等于高度加上页脚的填充 如果页脚被剪切，则设置页脚的z-index大于容器div
这里有一个例子:
<!doctype html> <html> <head> <title>Sticky Footer</title> <meta charset="utf-8"> <style> .wrapper { position: relative; min-height: 100%; } .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; } .column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; } /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */ </style> </head> <body> <div class="wrapper"> <div class="column"> <span>hello</span> </div> <div class="footer"> <p>This is a test. This is only a test...</p> </div> </div> </body> </html>
其他回答
一个解决方案是为盒子设置最小高度。不幸的是，IE似乎并没有很好地支持它(意外)。
查看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;
}
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%的上距，那么这个方法应该是有用的。
在我的网站上，我总是使用:
position: fixed;
.．.在我的CSS页脚。将它固定在页面底部。
由于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:之间的空间
项目沿对齐容器均匀分布 横轴。每对相邻项之间的间距为 相同。第一项与主启动边齐平，最后一项与主启动边齐平 项目与主端边缘齐平。
