我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm),有一个脚注,我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时,坚持在窗口底部 当有超过一个屏幕的内容时,保持在文档末尾,并像往常一样向下移动(而不是重叠内容)。
CSS是继承的,让我困惑。我似乎不能正确地改变它,把一个最小高度的内容或使页脚到底部。
我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm),有一个脚注,我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时,坚持在窗口底部 当有超过一个屏幕的内容时,保持在文档末尾,并像往常一样向下移动(而不是重叠内容)。
CSS是继承的,让我困惑。我似乎不能正确地改变它,把一个最小高度的内容或使页脚到底部。
当前回答
这样做
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
您还可以阅读flex,它被所有现代浏览器所支持
更新:我读过flex并尝试过。这对我很管用。希望你也能这样。以下是我的实现方法。这里main不是ID,而是div
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
在这里你可以阅读更多关于flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
请记住,旧版本的IE不支持它。
其他回答
一个非常简单的弹性解决方案,不需要固定的高度或改变元素的位置。
HTML
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
CSS
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
浏览器支持
所有主流浏览器,除了IE11及以下版本。
确保使用Autoprefixer适当的前缀。
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } ///////////////////////////////////////////// body, html { margin: 0; padding: 0; } header, main, footer { margin: 0; display: block; } header, footer { min-height: 80px; } header { background-color: #ccc; } main { background-color: #f4f4f4; } footer { background-color: orange; } <div class="container"> <header></header> <main></main> <footer></footer> </div>
只需要自定义页脚部分
.footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
}
<div class="footer">
Footer is always bootom
</div>
有些解决方案不适合我,但当我决定使用flex选项时,我发现最好的选择是下面的示例。
html, body{ height: 100%; } body{ display: flex; flex-direction: column; } .main-contents{ flex: 1 0 auto; min-height: 100%; margin-bottom: -77px; background-color: #CCC; } .footer{ height: 77px; min-height: 77px; width: 100%; bottom: 0; left: 0; background: #000000; flex-shrink: 0; flex-direction: row; position: relative; } .footer-text{ color: #FFF; } @media screen and (max-width: 767px){ #content{ padding-bottom: 0; } .footer{ position: relative; /*position: absolute;*/ height: 77px; width: 100%; bottom: 0; left: 0; } } <html> <body> <div class="main-contents" > this is the main content </div> </body> <footer class="footer"> <p class="footer-text">This is the sticky footer</p> </footer> </html>
一个非常简单的跨浏览器工作的方法是:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } <div id="container"> <div id="header">header</div> <div id="body">body</div> <div id="footer">footer</div> </div>
使用Bootstrap的一行解决方案
除了提供的所有CSS和jQuery解决方案, 我已经列出了一个使用Bootstrap的解决方案,在body标签上使用一个类声明:d-flex flex-column justify-content-between
这并不需要提前知道页脚的高度。 这并不需要设置绝对位置。 这适用于在较小屏幕上溢出的动态div。
html, body { height: 100%; } <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body class="d-flex flex-column justify-content-between text-white text-center"> <header class="p-5 bg-dark"> <h1>Header</h1> </header> <main class="p-5 bg-primary"> <h1>Main</h1> </main> <footer class="p-5 bg-warning"> <h1>Footer</h1> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>