我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。
当前回答
这些纯css解决方案与动态调整的内容正常工作(至少在firefox和Safari)例如,如果你有一个背景设置在容器div,页面,然后调整(添加几行)表内的div,表可以伸出的风格的底部区域,也就是说,你可以有一半的表在白色黑色主题和一半的表完成白色因为字体颜色和背景颜色是白色的。这基本上是无法修复的与meroller页面。
嵌套的div多列布局是一个丑陋的hack和100%最小高度的主体/容器div粘贴页脚是一个丑陋的hack。
我尝试过的唯一一个在所有浏览器上都可以工作的无脚本解决方案:一个更简单/更短的表，包含thead(用于标题)/tfoot(用于页脚)/tbody (td’s用于任意数量的列)和100%的高度。但这有语义和SEO的缺点(tfoot必须出现在tbody之前。尽管ARIA角色可能会帮助一些像样的搜索引擎)。
其他回答
查看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为:
position: absolute;
bottom: 0;
然后，您需要在#边栏和#内容的底部添加填充或边距，以匹配#footer的高度，或者当它们重叠时，#footer将覆盖它们。
此外，如果我没记错的话，IE6在底部有一个问题:0 CSS。你可能不得不为IE6使用JS解决方案(如果你关心IE6的话)。
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>
由于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:之间的空间
项目沿对齐容器均匀分布 横轴。每对相邻项之间的间距为 相同。第一项与主启动边齐平，最后一项与主启动边齐平 项目与主端边缘齐平。
使用CSS vh单位!
也许最明显的和非hack的方法来处理粘脚将是使用新的css视口单位。
以下面的简单标记为例:
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
如果页眉是80px高，页脚是40px高，那么我们可以在content div上用一个规则来创建我们的sticky footer:
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
这意味着:让内容div的高度至少等于视口高度减去页眉和页脚高度的总和。
就是这样。
* { 保证金:0; 填充:0; ｝ 标题{ 背景:黄色; 身高:80 px; ｝ .content { Min-height: calc(100vh - 120px); /* 80px页眉+ 40px页脚= 120px */ 背景:粉色; ｝ 页脚{ 高度:40像素; 背景:水; ｝ <header>header goes here</header> <div class="content">这个页面内容很少 这是我的页脚</footer>
... and here's how the same code works with lots of content in the content div: * { margin:0; padding:0; } header { background: yellow; height: 80px; } .content { min-height: calc(100vh - 120px); /* 80px header + 40px footer = 120px */ background: pink; } footer { height: 40px; background: aqua; } <header>header goes here</header> <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </div> <footer> This is my footer </footer>
NB:
1)必须知道页眉和页脚的高度
2)旧版本的IE (IE8-)和Android(4.4-)不支持视口单元。(caniuse)
3)曾经webkit在一个calc规则中有一个视口单位的问题。这确实是固定的(见这里)，所以没有问题。然而，如果你因为某些原因想避免使用calc，你可以使用负边距和box-sizing -填充来绕过它
像这样: * { 保证金:0;填充:0; ｝ 标题{ 背景:黄色; 身高:80 px; 位置:相对; ｝ .content { 最小高度:100 vh; 背景:粉色; Margin: -80px 0 -40px; 填充:80px 0 40px; box-sizing: border-box; ｝ 页脚{ 高度:40像素; 背景:水; ｝ <header>header goes here</header> <div class="content">Lorem ipsum < / div > <页脚> 这是我的页脚 < /页脚>
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
