我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。
当前回答
如果你不希望它使用位置固定，并在移动设备上烦人地跟随你，这似乎对我来说是有效的。
html {
min-height: 100%;
position: relative;
}
#site-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 6px 2px;
background: #32383e;
}
只需要将html设置为min-height: 100%;位置是相对的，位置是绝对的;底部:0;左:0;在页脚。然后确保页脚是主体中的最后一个元素。
如果这对其他人不起作用，请告诉我，以及为什么。我知道这些乏味的风格技巧在我没有想到的各种情况下会表现得很奇怪。
其他回答
jQuery跨浏览器自定义插件- $.footerBottom()
或者像我一样使用jQuery，并设置你的页脚高度为auto或fix，无论你喜欢什么，它都会工作。这个插件使用jQuery选择器，所以要使它工作，你必须包括jQuery库到你的文件。
下面是运行插件的方法。导入jQuery，复制这个自定义jQuery插件的代码，导入jQuery后再导入!这是非常简单和基本的，但很重要。
当你这样做的时候，你所要做的就是运行这段代码:
$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer"
// by setting target to {target:"div.footer"}
不需要将它放在document ready事件中。就这样，它会运行得很好。它会重新计算你的页脚的位置，当页面被加载，当窗口被调整大小。
下面是插件的代码，你不需要理解。只要知道如何实施就行了。它为你工作。但是，如果您想知道它是如何工作的，只需查看代码即可。我给你留言了。
//import jQuery library before this script
// Import jQuery library before this script // Our custom jQuery Plugin (function($) { $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom(); var defaults = { target: "footer", container: "html", innercontainer: "body", css: { footer: { position: "absolute", left: 0, bottom: 0, }, html: { position: "relative", minHeight: "100%" } } }; options = $.extend(defaults, options); // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE $(options.target).css({ "position": options.css.footer.position, "left": options.css.footer.left, "bottom": options.css.footer.bottom, }); $(options.container).css({ "position": options.css.html.position, "min-height": options.css.html.minHeight, }); function logic() { var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like. }; // DEFINE WHEN TO RUN FUNCTION $(window).on('load resize', function() { // Run on page loaded and on window resized logic(); }); // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE // return this.each(function() { // this.checked = true; // }); // return this; }; })(jQuery); // End of plugin // USE EXAMPLE $.footerBottom(); // Run our plugin with all default settings for HTML5 /* Set your footer CSS to what ever you like it will work anyway */ footer { box-sizing: border-box; height: auto; width: 100%; padding: 30px 0; background-color: black; color: white; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag --> <body> <div class="content"> <header> <nav> <ul> <li>link</li> <li>link</li> <li>link</li> <li>link</li> <li>link</li> <li>link</li> </ul> </nav> </header> <section> <p></p> <p>Lorem ipsum...</p> </section> </div> <footer> <p>Copyright 2009 Your name</p> <p>Copyright 2009 Your name</p> <p>Copyright 2009 Your name</p> </footer>
我创建了一个非常简单的库https://github.com/ravinderpayal/FooterJS
它使用起来很简单。在包含库之后，只需调用这行代码。
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
页脚可以通过使用不同的参数/id调用上面的函数来动态更改。
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
注意:-你不必改变或添加任何CSS。库是动态的，这意味着即使屏幕在加载页面后调整大小，它也会重置页脚的位置。我创建了这个库，因为CSS解决了这个问题，但当显示的大小发生显著变化时，从台式机到平板电脑或反之亦然，它们要么重叠的内容，要么不再保持粘性。
另一种解决方案是CSS媒体查询，但你必须为不同大小的屏幕手动编写不同的CSS样式，而这个库自动工作，并由所有基本的JavaScript支持浏览器支持。
编辑 CSS解决方案:
@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
现在，如果显示的高度超过你的内容长度，我们将使页脚固定在底部，如果不是，它将自动出现在显示的最后，因为你需要滚动来查看它。
而且，它似乎是一个比JavaScript/库更好的解决方案。
react友好的解决方案-(不需要分隔符div)
Chris coyer(值得尊敬的CSS-Tricks网站)在sticky - footer上保持了最新的页面，现在至少有五种创建sticky footer的方法，包括使用FlexBox和CSS-Grid。
为什么这很重要?因为，对我来说，我多年来使用的早期/旧方法对React不起作用——我不得不使用Chris的flexbox解决方案——这很简单，也很有效。
下面是他的CSS-Tricks flexbox粘性页脚-看看下面的代码，它不可能更简单。
(下面的StackSnippet示例没有完美地呈现示例的底部。页脚会延伸到屏幕底部，这在现实生活中是不会发生的。)
html,身体{高度:100%;} 身体{显示:flex;flex-direction:列;} .content {flex: 1 0 auto;} /* flex:增长/收缩/伸缩基础;* / .footer {flex-shrink: 0;} /* ----以下仅为演示---- */ .footer{背景:苍绿色;} 身体< > <div class="content">Page content - height扩展到填充空间</div> <footer class="footer"> footer Content</footer> . 身体< / >
Chris还为那些喜欢网格的人演示了这个CSS-Grid解决方案。
引用:
CSS-Tricks - Flexbox的完整指南
查看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;
}
你可以使用position: absolute following将页脚放在页面的底部，但要确保你的两列有适当的边距-底部，这样它们就不会被页脚遮挡。
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
