法拉盛页脚到页面底部，Twitter的引导法拉盛页脚到页面底部，Twitter的引导(Flushin

2019-05-13 11:58发布

站内文章 / 后端开发
21 0 0

我基本熟悉了冲洗使用CSS页脚的技术。

但我有一些麻烦这种方法来为Twitter的引导，最有可能的工作，由于这样的事实，Twitter的引导响应性的。 使用Twitter的引导，我没能获得页脚刷新到使用上述博客文章中描述的方法在页面的底部。

Answer 1:

发现片断在这里可以很好地表现引导

HTML： 

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS： 

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

来源： 演示和教程 （不再提供; RIP ）



Answer 2:

这已被包括在引导2.2.1。

引导3.X

使用导航栏组件，并添加.navbar-fixed-bottom类： 

<div class="navbar navbar-fixed-bottom"></div>

引导4.x版 

<div class="navbar fixed-bottom"></div>

不要忘了补充body { padding-bottom: 70px; } body { padding-bottom: 70px; }或其他页面内容可能会被覆盖。

文档： http://getbootstrap.com/components/#navbar-fixed-bottom



Answer 3:

Twitter的引导不发粘页脚中的工作示例

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

你至少需要一个元素与#footer

如果不想滚动条，如果内容将适合屏幕只是改变的10比0的值
滚动条会显示出来，如果含量不适合屏幕。



Answer 4:

以下是如何从官方页面实现这个：

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

我只是测试它现在和它的伟大工程！ :)

HTML 

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

相关的CSS代码是这样的： 

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}


Answer 5:

对于粘页脚我们使用了两个DIV's在HTML基本粘页脚效果。 像这样写：

HTML 

<div class="container"></div>

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

CSS 

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}


Answer 6:

更简单的官方例子： http://getbootstrap.com/examples/sticky-footer-navbar/ 

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}


Answer 7:

好吧，我发现混合navbar-inner和navbar-fixed-bottom 

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

这似乎很好，对我的作品

见例如小提琴



Answer 8:

这非常适合我。

此类导航栏固定的底部添加到您的页脚。 

<div class="footer navbar-fixed-bottom">

我用这样的： 

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

并将其设置为底部全宽过来了。

编辑：这将设置页脚总是可见的，这是你需要考虑的东西。



Answer 9:

你需要用你的.container-fluid格，以便您的粘页脚的工作，你还缺少你的一些属性.wrapper类。 试试这个：

取出padding-top:70px从你的body标记，它包含在您.container-fluid代替，就像这样： 

.wrapper > .container-fluid {
    padding-top: 70px;
}

我们必须这样做，因为推动body向下，以适应导航栏结束了一下进一步推页脚（70像素进一步）过去视所以我们得到一个滚动条。 我们取得更好的成绩推动.container-fluid格来代替。

接下来我们要删除.wrapper类的外.container-fluid股利和包装你#main与它的div，像这样： 

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

你当然页脚都有被淘汰的的.wrapper DIV所以从`.wrapper DIV删除它，外界把它，就像这样： 

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

这就是后全部完成，妥善把你的页脚接近你.wrapper类使用阴性切缘，就像这样： 

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

这应该工作，虽然你很可能将不得不修改一些其他的事情，使当屏幕大小，就像在重置高度它的工作.wrapper类，如下所示： 

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}


Answer 10:

HenryW的答案是好的，但我需要一些调整，以得到它的工作我想怎样。 特别是以下也处理：

  • 由第一隐形标记和JavaScript设置可见避免在页面加载的“跳动”
  • 处理浏览器调整大小正常
  • 另外设置页脚备份页面如果浏览器变得更小和页脚变得比页大
  • 高度调整功能

下面是与调整工作对我来说：

HTML： 

<div id="footer" class="invisible">My sweet footer</div>

CSS： 

#footer {
    padding-bottom: 30px;
}

JavaScript的： 

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});


Answer 11:

这与Twitter的引导和新导航栏固定底课上做的正确方法：（你不知道我花了多长时间寻找这）

CSS： 

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML： 

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>


Answer 12:

在最新版本的引导4.3，这是可以做到用.fixed-bottom类。 

<div class="fixed-bottom"></div>

下面是我如何使用它与页脚： 

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

你可以找到的位置文档中的详细信息在这里 。



Answer 13:

使用导航栏组件，并添加.navbar固定底类： 

<div class="navbar navbar-fixed-bottom"></div>

加身

  { padding-bottom: 70px; }


Answer 14:

处理宽度约束布局中使用以下，这样你就不会得到圆角，并让您的导航栏将是应用的边齐平

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

那么你可以使用CSS来覆盖自举类来调整高度，字体和颜色

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }


Answer 15:

您可以使用jQuery来处理这个问题： 

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});


Answer 16:

最简单的技术可能是使用自举navbar-static-bottom结合设置与所述主容器的div height: 100vh （新CSS3 视图端口百分比 ）。 这将刷新页脚底部。 

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>


Answer 17:

测试了Bootstrap 3.6.6 。

HTML 

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS 

.footer {
  bottom: 0;
  position: absolute;
}


Answer 18:

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

页脚高度涡卷元件的底部缩进的尺寸相匹配。 

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}


Answer 19:

为我工作的唯一一个!: 

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}


Answer 20:

它看起来像的height:100% “链”在被打破div#main 。 试着增加height:100%它和可能让你更接近你的目标。



Answer 21:

在这里，你会发现在HAML（该方法http://haml.info在顶部和页脚在页面底部的导航栏）： 

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER


Answer 22:

把事情简单化。 

footer {
  bottom: 0;
  position: absolute;
}

您可能还需要通过增加抵消页脚的高度margin-bottom相当于页脚高度与body 。



Answer 23:

下面是一个使用CSS3的例子：

CSS： 

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML： 

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

小提琴



Answer 24:

这是自举是如何做的：

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

只需使用页面的源代码，你应该能够看到。 别忘记<div id="wrap">一个的顶部。



Answer 25:

另一种可能的解决方案，只是用媒体查询

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}


Answer 26:

使用下面的类将其推到页面的最后一行，并使其向它的中心。 如果您使用的是轨道HAML页红宝石，你可以使用下面的代码。 %footer.card.text-center

请不要忘记使用Twitter bootstrapp



Answer 27:

下面是使用Flexbox的（在写作时4.3）为引导的最新版本的解决方案。

HTML： 

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS： 

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

和codepen例如： https://codepen.io/tillytoby/pen/QPdomR



文章来源: Flushing footer to bottom of the page, twitter bootstrap
标签： css twitter-bootstrap footer
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~