Question

这个似乎有很多已解决的问题，但它们似乎都不适合我...

我创建了这个小小的jsfiddle给你看：jsfiddle footer

CSS：

.footer {
     width:798px;
     border-top: 2px solid #2E181A;
     clear: both;
     padding: 5px 0 0 0;
     background-color: inherit;
     text-align: center;
     bottom:0;
     background-color: #E6D9BD;
     position:relative;
     height: 30px;
     margin: -30px auto 2px auto;
     z-index:30;
 }

 .container {
     width: 788px;
     margin: 0px auto 0px auto;
     padding: 0px 0px 30px 0px;
     border:5px solid #2E181A;
     background-color: #E6D9BD;
     min-height: 100%;
     position:relative;
     content: " "; /* 1 */
     display: table; /* 2 */
 }

 .contentleft {
     background-color: inherit;
     margin:5px 10px 10px 10px;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 300px;
     display:block;
 }

 .contentright {
     background-color: inherit;
     margin:5px 0px 10px 10px;
     border:0px solid #2E181A;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 420px;
     display:block;
 }

我在div.footer设置了一个上边框，这应该是可见的，边框和div.container之间有一点空间。

希望你能快速浏览一下代码，看看我做错了什么！

Answer 1

现代清洁CSS“粘性页脚”来自James Dean

<强> HTML

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

<强> CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Demo here

Answer 2

我不确定这是不是你想要的？ http://jsfiddle.net/2jn3J/19/

我为页脚div添加了一个容器，其高度为50px，固定在底部。页脚div现在绝对位于底部，div高度为30px，因此间隙为20px。

.footer-container {
    background-color:white;
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    z-index:30;
    clear: both;
}

.footer {
    border-top: 2px solid #2E181A;
    background-color: inherit;
    text-align: center;
    background-color: #E6D9BD;
    height:30px;
    position:absolute;
    bottom:0;
    width:100%;
}

.container
{
    width: 100%;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    background-color: #E6D9BD;
    height:2000px;
    position:relative;
        content: " "; /* 1 */
    display: table; /* 2 */
}
.contentleft
{

    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 300px;
        display:block;
}
.contentright
{

    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}

Answer 3

你实际上接近于从http://www.cssstickyfooter.com/html-code.html开始使用这个概念，它只需要html, body { height: 100%; }变得“粘性”。

http://jsfiddle.net/2jn3J/22/

如果你想完全正确地做到并获得内容和页脚之间的空间，你将不得不添加另一个div和min-height: 100%;并删除min-height: 100%;来自.container。

http://jsfiddle.net/2jn3J/28/

CSS：

html, body { height: 100%; }
.wrap { min-height: 100%; }
.footer {
    width:798px;
    border-top: 2px solid #2E181A;
    clear: both;
    padding: 5px 0 0 0;
    background-color: inherit;
    text-align: center;
    bottom:0;
    background-color: #E6D9BD;
    position:relative;
    height: 30px;
    margin: -37px auto 0 auto;
    z-index:30;
}

.container {
    width: 788px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    border:5px solid #2E181A;
    background-color: #E6D9BD;
    position:relative;
    content: " "; /* 1 */
    display: table; /* 2 */
    overflow: auto;
}

.contentleft {
    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: auto;
    width: 300px;
    display:block;
}
.contentright {
    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}

HTML：

<div class="wrap">
<div class="container">

<div class="contentleft">Content in the left</div>
<div class="contentright">Content in the right</div>

</div>
</div>

<div class="footer">Sticky footer</div>

Answer 4

使用Flexbox，生活更轻松。

.FlexContainer {
  display: flex;
  flex-direction: column;
}

.Main-Content {
  flex: 1; 
  // This ensures, all extra space is stretched by this class. Remaining will stretch to own height
}

/* Only to distinguish. No need to give body height  */

header {
background-color: red;
}
main {
background-color: green;
}
footer {
background-color: blue;
}

body {
height: 300px;
}

<body class="FlexContainer">
  <header>HEADER</header>
  <main class="Main-Content">
    This is main section
  </main>
  <footer>FOOOOTERRR</footer>
</body>

Answer 5

这是用css进行的表模拟。页眉和页脚的高度为100px，容器div占据了屏幕的所有空间

CSS：

#frame{
   display: table;
   height: 100%
   width: 100%;
}

#header{
   display: table-row;
   height: 100px;
   background-color: red;
}

#container{
   display: table-row;
}

#footer{
   display: table-row;
   height: 100px;
   background-color: black;
}

HTML：

<div id="frame">
    <div id="header"></div>
    <div id="container"></div>
    <div id="footer"></div>
</div>

JSFiddle（我为身体添加了一些额外的样式，因为小提琴在iframe中，但在通常的浏览器行为中你不会需要它。）

Answer 6

我刚刚写了一篇有关此的文章。您可以找到它on medium。

有很多CSS有效的解决方案，但我建议使用Javascript来实现此结果。

这背后的主要思想是您想知道页脚上方的高度是多少，以及需要多少调整页脚的顶部才能将其移动到底部。这是一个Gist，正是这样做的。

这是执行此操作的代码（假设页脚是ID为window.addEventListener("load", activateStickyFooter); function activateStickyFooter() { adjustFooterCssTopToSticky(); window.addEventListener("resize", adjustFooterCssTopToSticky); } function adjustFooterCssTopToSticky() { const footer = document.querySelector("#footer"); const bounding_box = footer.getBoundingClientRect(); const footer_height = bounding_box.height; const window_height = window.innerHeight; const above_footer_height = bounding_box.top - getCssTopAttribute(footer); if (above_footer_height + footer_height <= window_height) { const new_footer_top = window_height - (above_footer_height + footer_height); footer.style.top = new_footer_top + "px"; } else if (above_footer_height + footer_height > window_height) { footer.style.top = null; } } function getCssTopAttribute(htmlElement) { const top_string = htmlElement.style.top; if (top_string === null || top_string.length === 0) { return 0; } const extracted_top_pixels = top_string.substring(0, top_string.length - 2); return parseFloat(extracted_top_pixels); }的订单）：

 ServletContext servletContext = session.getServletContext();
 String localDir = servletContext.getRealPath("").replace('\\', '/');
 File jnlp = new File(localDir + "something.jnlp");
 FileWriter fw = new FileWriter(jnlp);
BufferedWriter bw = new BufferedWriter(fw);
bw.write(//contents of jnlp file);
 response.sendRedirect(jnlp.getName());

如果您需要更详细的答案，请转到medium article。我还为此写了JS Fiddle。

CSS - 粘性页脚

6 个答案: