Fatal编程技术网
  • css/
  • Css 将页脚刷新到页面底部，推特引导

Css 将页脚刷新到页面底部，推特引导

css twitter-bootstrap

Css 将页脚刷新到页面底部，推特引导,css,twitter-bootstrap,footer,Css,Twitter Bootstrap,Footer,我通常熟悉使用css刷新页脚的技术 但是我很难让这种方法在Twitter引导中起作用，很可能是因为Twitter引导本质上是响应性的。使用Twitter引导，我无法使用上述博文中描述的方法将页脚刷新到页面底部。因为我们在HTML中使用两个DIV来实现基本粘性页脚效果。这样写： <div class="container-fluid footer navbar-fixed-bottom"> <!-- start footer --> </div> HTML &

我通常熟悉使用css刷新页脚的技术

但是我很难让这种方法在Twitter引导中起作用，很可能是因为Twitter引导本质上是响应性的。使用Twitter引导，我无法使用上述博文中描述的方法将页脚刷新到页面底部。

因为我们在HTML中使用两个
DIV来实现基本粘性页脚效果。这样写：


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


HTML


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

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



<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>



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



看起来
高度：100%
“链条”在
div#main
处断裂。尝试向其添加
高度：100%
，这可能会使您更接近您的目标。
您需要包装您的
.container fluid
div为了使粘性页脚正常工作，您的
.wrapper
类中也缺少一些属性。试试这个：

将
衬垫顶部：70px
从
主体
标签上取下，并将其包含在
容器流体
中，如下所示：


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



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



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



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



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


我们必须这样做，因为向下推动
主体
以适应导航栏，最终会将页脚再推一点（70px）过视口，因此我们得到一个滚动条。我们使用
.container fluid
div来代替，可以获得更好的结果

接下来，我们必须移除
.wrapper
类，该类位于
.container fluid
div之外，并用它包装
#main
div，如下所示：


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



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



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



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



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


完成后，使用负边距将页脚适当地推近
.wrapper
类，如下所示：


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



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



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



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



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


这应该是可行的，尽管在调整屏幕大小时，您可能需要修改一些其他的东西，比如重置
.wrapper
类的高度，如下所示：


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



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



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



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



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


发现这些代码片段对于引导非常有效

Html:


这现在包含在Bootstrap 2.2.1中

引导3.x


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



使用导航栏组件并添加
。导航栏固定底部
类：


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






引导4.x


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






不要忘记添加
正文{padding bottom:70px；}
，否则页面内容可能会被覆盖


文档：
在这里，您可以在HAML（）中找到方法，导航栏位于页面顶部，页脚位于页面底部：


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



以下是如何从官方页面实现此功能：



我现在刚测试过，效果很好！：）

HTML


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

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



<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>



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



这是使用Twitter引导和新的navbar固定底层类的正确方法：（你不知道我花了多长时间寻找这个）

CSS:

HTML:



...

    

  • 

  • 



我发现了
导航栏内部
和
导航栏固定底部


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





1.0.1版



它看起来不错，对我很有用



请参见中的示例

页脚高度与包裹元素底部缩进的大小匹配


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



要处理宽度约束布局，请使用以下命令，这样您就不会得到圆角，并且导航栏将与应用程序的侧面齐平


<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>



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>




$（文档）.ready（函数（）{
var docHeight=$（window.height（）；
var footerHeight=$（'#footer'）.height（）；
var footerTop=$（'#footer'）.position（）.top+footerHeight；
如果（页脚顶部<八）
$（'#footer'）.css（'margin-top'，10+（docHeight-footer）+'px'）；
});


在用户打开devtools或调整窗口大小时始终更新的版本


<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>




$（文档）.ready（函数（）{
setInterval（函数（）{
var docHeight=$（window.height（）；
var footerHeight=$（'#footer'）.height（）；
var footerTop=$（'#footer'）.position（）.top+footerHeight；
var marginTop=（多克-页脚+10）；
如果（页脚顶部<八）
$（'#footer'）.css（'margin-top'，marginTop+'px'）；//页脚填充30
其他的
$（'#footer'）.css（'margin-top'，'0px'）；
//console.log（“docheight:+docheight+”\n“+”页脚高度：“+footerhight+”\n“+”页脚顶部：“+footertop+”\n“+”新的docheight:“++$（window）.height（）+”\n“+”margintop:“+margintop”）；
}, 250);
});


您至少需要一个带有
#页脚的元素
如果不希望滚动条内容适合屏幕，只需将10的值更改为0

如果内容不适合屏幕，滚动条将显示。
保持简单


footer {
  bottom: 0;
  position: absolute;
}



您可能还需要通过向
正文添加与页脚高度相等的
页边距底部
来偏移页脚高度
您可以使用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();
    });
});



以下是使用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;
}



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



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



#footer {
    padding-bottom: 30px;
}



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;
});


HTML:


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;
}



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



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



#footer {
    padding-bottom: 30px;
}



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;
});




正文内容。。。。
页脚内容。。。。



引导程序就是这样做的：




只要使用页面源代码，您就应该能够看到。不要忘记顶部的
按钮。
更简单的官方示例：


唯一对我有用的人！：


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



最简单的技术可能是使用引导
navbar static bottom
，同时将主容器div设置为
高度：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>




一些内容

&复制；页脚4U


使用导航栏组件并添加。导航栏固定底部类：


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


是好的，虽然我需要一些调整，以使它的工作方式我想要的。