我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
我一直在调查这个问题。我见过不少解决方案，每一个都有问题，通常涉及一些神奇的数字。
因此，我从各种来源的最佳实践中得出了这个解决方案:
http://jsfiddle.net/vfSM3/248/
我想在这里实现的事情是让主要内容在绿色区域内的页脚和页眉之间滚动。
这是一个简单的CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 4em;
background-color: red;
position: relative;
z-index: 1;
}
.content {
background: white;
position: absolute;
top: 5em;
bottom: 5em;
overflow: auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background: green;
position: relative;
overflow: auto;
}
footer {
height: 2em;
position: relative;
z-index: 1;
background-color: yellow;
}
其他回答
我认为你可以将主要内容设置为视口高度，所以如果内容超过，主要内容的高度将定义页脚的位置
* { 保证金:0; 填充:0; 宽度:100%; ｝ 身体{ 显示:flex; flex-direction:列; ｝ 标题{ 高度:50 px; 背景:红色; ｝ 主要{ 背景:蓝色; /*这是最重要的部分 身高:100 vh; ｝ 页脚{ 背景:黑色; 高度:50 px; 底部:0; ｝ <标题> < /头> 主要主要< > < / > <页脚> < /页脚>
这就是所谓的粘性页脚。在谷歌上搜索它会出现很多结果。我成功地使用过CSS Sticky Footer。但还有更多。
* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } .footer, .push { height: 4em; } <html> <head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="wrapper"> <p>Your website content here.</p> <div class="push"></div> </div> <div class="footer"> <p>Copyright (c) 2008</p> </div> </body> </html>
此代码的源代码
这就是我解决同样问题的方法
html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; margin: 0; padding-bottom: 6rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif; } .demo { margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%; } .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } <div class="demo"> <h1>CSS “Always on the bottom” Footer</h1> <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p> <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p> <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p> </div> <div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
<body>
<section class="wrapper">
<!--Some Content-->
</div>
<section class="footer"></section>
</body>
.wrapper {
min-height: 100vh;
}
.footer {
top: 100vh;
}
你可以这样做
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
