我有一个简单的2列布局,带有页脚,可清除标记中的右和左div。我的问题是我无法在所有浏览器中都将页脚停留在页面底部。如果内容将页脚放下,它会起作用,但并非总是如此。
我有一个简单的2列布局,带有页脚,可清除标记中的右和左div。我的问题是我无法在所有浏览器中都将页脚停留在页面底部。如果内容将页脚放下,它会起作用,但并非总是如此。
Answers:
要获得页脚的粘性:
有一个<div>
与class="wrapper"
你的内容。
右前收盘</div>
的的wrapper
地方
<div class="push"></div>
。
权后收盘</div>
的的wrapper
地方
<div class="footer"></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 */
}
进行页脚粘贴的最明显,最简单的方法可能是利用新的CSS视口单元。
以下面的简单标记为例:
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
如果页眉的高度为80px,页脚的高度为40px,则可以使用内容div上的一条规则来制作粘性页脚:
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
这意味着:让内容div的高度至少为视口高度的100%减去页眉和页脚的组合高度。
而已。
...这是相同的代码如何处理内容div中的许多内容:
注意:
1)必须知道页眉和页脚的高度
2)旧版本的IE(IE8-)和Android(4.4-)不支持视口单元。(犬)
3)从前,Webkit的计算规则中的视口单位存在问题。这确实是固定的(请参阅此处),所以那里没有问题。但是,如果出于某些原因要避免使用calc,则可以使用负边距和框大小填充来解决该问题-
像这样:
display: flex
解决方案的灵感来自Philip Walton的粘性页脚。
该解决方案仅适用于:
它是基于上flex
显示,利用在flex-grow
属性,它允许一个元件生长在任一高度或宽度(当flow-direction
被设置为column
或row
分别地),以占据容器中的额外的空间。
我们要充分利用也是vh
单元,其中1vh
被定义为:
视口高度的1/100
因此,高度为 100vh
它的告诉元素跨越整个视口高度的一种简洁方法。
这是构造网页的方式:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
为了使页脚贴在页面底部,您希望主体和页脚之间的空间增加到将页脚推到页面底部所需的距离。
因此,我们的布局变为:
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
}
<body>
<div class="content">Hello World!</div>
<div class="spacer"></div>
<footer class="footer"></footer>
</body>
您可以在JSFiddle中使用它。
请注意,Safari 对flex-shrink
属性的实现存在缺陷,该属性使项目缩小的幅度超过了显示内容所需的最小高度。要解决此问题,您必须在上述示例flex-shrink
中将.content
和的属性显式设置为0 footer
:
.content { flex-shrink: 0; }
.footer { flex-shrink: 0; }
.Site-content
元素中扮演的角色相同spacer
。只是被称为不同。
.Site-content
有一个类似物.content
..但是没关系,我问gcedo是否对此有一些特定的想法,无需猜测
您可以使用position: absolute
following将页脚放在页面底部,但是请确保您的2列具有适当的位置,margin-bottom
以使它们永远不会被页脚遮挡。
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
0px
我所看到的所有样式表中的所有s都应该是just 0
。
这是一个使用jQuery的解决方案,就像一个魅力。它检查窗口的高度是否大于主体的高度。如果是这样,则它将更改页脚的页边空白以进行补偿。在Firefox,Chrome,Safari和Opera中进行了测试。
$( function () {
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '#footer' ).css( 'margin-top', height_diff );
}
});
如果您的页脚已经有一个页边距的顶部(例如50像素),则需要将最后一部分更改为:
css( 'margin-top', height_diff + 50 )
与@gcedo相似的解决方案,但无需添加中间内容即可压下页脚。我们可以简单地将其添加margin-top:auto
到页脚中,无论页脚的高度或上面内容的高度如何,该页脚都将被推到页面底部。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
.content {
padding: 50px;
background: red;
}
.footer {
margin-top: auto;
padding:10px;
background: green;
}
<div class="content">
some content here
</div>
<footer class="footer">
some content
</footer>
.content
flex: 1 0 auto;
使它可增长和不可缩放,但这margin-top: auto;
是一个不错的技巧,涉及对页脚进行样式设置,而不是“无关的”样式.content
。实际上,我想知道为什么在这种方法中需要使用
display:flex
其删除将无法正常工作,那么您将具有正常的块元素流
margin:0 auto
的居中块元素一样),但是我们没有任何列方向,所以没有边距自动带有顶部/底部。Flexbox同时具有行/列方向;)。这是微小的差异,但是在flexbox中也使用margin来对齐元素,因此即使在行方向上,您也可以使用margin-top / bottom auto垂直对齐..您可以在此处阅读更多内容:w3.org/TR/css- flexbox-1 /#auto-margins
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
main.css:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
资料来源:https : //www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
我有时会为此感到挣扎,而且我总是发现彼此之间所有这些div的解决方案都是一个混乱的解决方案。我只是把它弄乱了一点,我个人发现这可行,它当然是最简单的方法之一:
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
我喜欢的是不需要应用任何额外的HTML。您只需添加此CSS,然后随时编写HTML
由于电网的解决方案尚未提交,这里是,只有两个声明的父元素,如果我们把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>
这些物品沿着横轴均匀地分布在对齐容器内。每对相邻项目之间的间距是相同的。第一项与主边缘齐平,最后一项与主边缘齐平。
使用绝对定位和z-index通过以下步骤以任何分辨率创建粘性页脚div:
position: absolute; bottom: 0;
和所需高度的页脚divdiv
包装身体内容的容器position: relative; min-height: 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: green; }
/* 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>
对于这个问题,我看到的许多答案都是笨拙的,难以实现且效率低下的,所以我想我会试一试,并提出自己的解决方案,该解决方案只是CSS和html的一小部分
html,
body {
height: 100%;
margin: 0;
}
.body {
min-height: calc(100% - 2rem);
width: 100%;
background-color: grey;
}
.footer {
height: 2rem;
width: 100%;
background-color: yellow;
}
<body>
<div class="body">test as body</div>
<div class="footer">test as footer</div>
</body>
这可以通过设置页脚的高度,然后使用css calc计算出页脚仍在底部时页面的最小高度来起作用,希望这对某些人有所帮助:)
这些纯CSS解决方案都不能与动态调整内容大小(至少在firefox和Safari上)正常工作,例如,如果在容器div,页面上设置了背景,然后在div中调整表的大小(添加几行),表格可以伸出样式区域的底部,即,您可以让一半的桌子以白色为黑色主题,另一半的桌子为全白色,因为字体颜色和背景颜色均为白色。这基本上是不可能用themeroller页面修复的。
嵌套的div多列布局是一个丑陋的技巧,而用于粘贴页脚的100%最小高度的主体/容器div是一个丑陋的技巧。
我尝试过的所有浏览器上唯一可用的无脚本解决方案:一个更简单/更短的表,其中带有thead(用于页眉)/ tfoot(用于页脚)/ tbody(td用于任意数量的列)和100%的高度。但是,这已经感觉到语义和SEO的劣势(必须在“笨拙”之前出现“笨拙”。尽管如此,ARIA角色可能会帮助体面的搜索引擎)。
许多人在这里提出了这个简单问题的答案,但是我要补充一件事,考虑到在弄清楚自己做错了什么之前我感到多么沮丧。
如前所述,最简单的方法是这样。
html {
position: relative;
min-height: 100%;
}
body {
background-color: transparent;
position: static;
height: 100%;
margin-bottom: 30px;
}
.site-footer {
position: absolute;
height: 30px;
bottom: 0px;
left: 0px;
right: 0px;
}
但是,职位(静态)通常是默认设置,因此未在帖子中提及: body标记上的。位置相对将不起作用!
我的wordpress主题已覆盖默认的正文显示,并且使我困惑了很长时间。
我知道一个旧线程,但是如果您正在寻找响应式解决方案,那么此jQuery附加功能将有所帮助:
$(window).on('resize',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({'height': fh});
$("#wrapper").css({'margin-bottom': -fh});
}
完整指南可以在这里找到:https : //pixeldesigns.co.uk/blog/response-jquery-sticky-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 Media Queries,但是您必须为不同大小的屏幕手动编写不同的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 /库解决方案更好。
对于自然的页眉和页脚高度,首选Flex布局。此flex解决方案已在现代浏览器中经过测试,并且实际上在IE11中可以正常运行:)。
的HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
的CSS
html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
}
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"}
无需将其放置在文档准备事件中。它会很好地运行。加载页面和调整窗口大小时,它将重新计算页脚的位置。
这是您无需了解的插件代码。只知道如何实现它。它为您完成工作。但是,如果您想知道它是如何工作的,只需浏览一下代码即可。我给你留下了评论。
//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>
flex解决方案对我来说可以使页脚变粘,但不幸的是,更改正文以使用flex布局使我们的某些页面布局发生了变化,而且效果不佳。最终对我有用的是:
jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");
});
我是从ctf0的响应获得的,网址为https://css-tricks.com/couple-takes-sticky-footer/
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 3px solid #73AD21;
}
<body style="height:1500px">
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
如果您不希望使用固定位置,并且在移动设备上烦人地关注您,那么到目前为止,这似乎对我有用。
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%;
和position: relative;
,然后position: absolute; bottom: 0; left: 0;
在页脚上即可。然后,我确保页脚是体内的最后一个元素。
让我知道这是否对其他任何人无效,以及原因。我知道这些乏味的风格骇客会在我从未想到的各种情况下表现异常。