Bootstrap, jumbotron和sticky footer

我的头版上有一个巨型电子烟, 效果很好。我的页脚很粘, 而且效果很好。直到我把它们放在一起。包裹类破坏了超大型飞机, 但将其取出却破坏了页脚。内容也迷失在那里的混乱中。显然, 在使用超大屏幕时, 从技术上讲, 我不需要页脚固定在底部, 因为超大屏幕会将页脚推到底部, 但对于其他没有大屏幕的页面, 我需要它。
另外, 在任何人尝试使用固定页脚回答之前, 这根本不是我想要的。
小提琴

html, body { height: 100%; margin: 0; }.wrap { min-height: 100%; width: 100%; }.footer { position: absolute; width: 100%; margin-top:-150px; height: 150px; background: orange; }.jumbotron { background-color: inherit; position: relative; height: 100%; }.container-full-bg { width: 100%; height: 100%; max-width: 100%; background-position: center; background-size: cover; background-color: red; }.container-full-bg .container, .container-full-bg .container .jumbotron { height: 100%; width: 100%; }

< div class="wrap"> < div class="container-full-bg"> < div class="container"> < div class="jumbotron"> < div class="row"> < div class="col-sm-12"> my jumbotron< /div> < /div> < /div> < /div> < /div> < div class="container"> < div class="row"> < div class="col-sm-12"> content< br/> content< br/> content< br/> content< br/> content< br/> content< br/> content< br/> content< br/> content< br/> < /div> < /div> < /div> < /div> < !--/wrap--> < div class="footer"> my footer< /div>

#1这就是我最终得到的…
由于我使用的是Wordpress, 因此我决定(即使我不想)检查我们是否在首页上, 并在需要的地方添加必要的样式表和div：
已添加到文档开头的header.php中。

< ?php if(!is_front_page()) { echo '< link rel="stylesheet" type="text/css" href="' . get_template_directory_uri() . '/stickyfooter.css" /> '; } ?> ...

然后, 如果我们不在首页上, 我就添加包裹

< ?php if(!is_front_page()){ //wrap the content only if we're not on the front page. //this is to push the sticky footer down. echo '< div class="wrap"> '; }?> ...

在footer.php中, 我在实际页脚之前关闭wrap div
stickyfooter.css：

.wrap { min-height: 100%; width: 100%; margin-bottom: -246px; }.wrap:after { content: ""; display: block; height:246px; } .footer { clear: both; height: 246px; margin-top: -246px; }

【Bootstrap, jumbotron和sticky footer】所以你有它。根据页面的布局, 我向页面提供了他们喜欢的代码。