如何使有条件的“粘”页脚？

-1

我想让我的页脚“粘”，但高度各不相同，因此无法使用我找到的大多数方法或flexbox。有没有什么办法用JavaScript来检查div下面有多少空间，所以我可以添加多少空白？如何使有条件的“粘”页脚？

的HTML如下：

<container> 
    <header></header> 
    <body><sometimes sub content></sub content></body> 
    <footer></footer> 
    </container>

还试图把页脚的容器外，看到了一些解决方案，但他们又都需要一个固定的高度。

来源

2017-08-02 nick

这将有助于别人理解你的问题，如果你可以添加一些你的HTML标记，那你到目前为止的JavaScript代码。 – Nisarg

这不是div下的空间，因为它是页脚的高度，是的？我假设你的问题是你的页脚正在遮盖内容，对吧？如果是这样，如果你的页脚没有空白/填充，你可以简单地做一个'$（“body”）。css（“margin-bottom”，$（“footer”）。height（）+“px”' – mhodges

否，在没有太多内容的页面上，页脚位于屏幕中间的内容末尾，我想让它保持在窗口的底部，但是在其他页面上更多的内容我想在内容 – nick

您可以检查是否$(document).height() > $(window).height()。这会告诉你内容的高度是否比视口长。如果是这样，请将页脚留在原来的位置。如果文档高度为< =视口高度，请添加页脚粘性。如下所示：

要查看粘性和非粘性之间的区别，请运行以下代码片段以使页脚位于页面底部。要查看页脚粘滞的位置，请在全屏模式下（代码段输出的右上角）运行代码段。您也可以在全屏模式下运行它，然后缩小浏览器大小 - 重新计算窗口大小。

$(window).on("load resize", function() { 
 
    // if content height <= viewport height, make footer sticky 
 
    // else leave footer at the bottom of the content. 
 
    $(".footer").toggleClass("sticky", $(document).height() <= $(window).height()); 
 
});

.footer { 
 
    width: 100%; 
 
    background-color: #555588; 
 
    color: white; 
 
} 
 

 
.sticky { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre style="font-size: 16px;"> 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
    content 
 
</pre> 
 
<div class="footer">foo foo foo <br/>foo<br/>foo<br/></div>

来源

2017-08-02 17:36:25 mhodges

哇，怪异的！为什么它会将我的编辑分成一个新帖子？ – mhodges

关于你的mod标志，很遗憾我们很少能够帮助你。虽然我们可以合并两个*问题*（移动a从愚蠢到主人，保留他们的选票），我们不能合并两个*答案*。我不知道你的编辑如何分成新的职位。他们不应该。如果您确定*您没有无意中点击“添加另一个答案”，那么您应该在[Meta]上发布错误报告。无论如何，关于手头的问题，唯一可以做的就是删除旧的，过时的答案。我已经为你做了。只有10分输了;没什么大不了的。 –

您可以将main的最小高度设置为100vh，并将页脚完全放置在底部。主要应该有底部填充至少页脚的高度，box-sizing: border-box主要是100vh高度。

然而，看到粘脚在行动的例子。

body { 
 
    margin: 0; 
 
} 
 

 
main { 
 
    position: relative; 
 
    padding-bottom: 60px; 
 
    min-height: 100vh; 
 
    box-sizing: border-box; 
 
} 
 

 
.hidden { 
 
    background: blue; 
 
    height: 100vh; 
 
} 
 

 
main:not(:hover) > .hidden { 
 
    display: none; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 50px; 
 
    bottom: 0; 
 
    background: red; 
 
}

<main> 
 
    <article>Short Article</article> 
 
    
 
    <article class="hidden"> 
 
    long article 
 
    </article> 
 
    
 
    <footer> 
 
    I'm the footer 
 
    </footer> 
 
</main>

来源

2017-08-02 17:27:00

如何使有条件的“粘”页脚？

回答

相关问题