【问题标题】:Using flexbox sticky footer with bootstrap使用带有引导程序的 flexbox 粘性页脚
【发布时间】:2015-04-08 00:08:30
【问题描述】:

我正在尝试使用这个粘性页脚:

http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

body{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content{
  flex: 1;
}

但它会在

任何简单的 css 修复让它适用于所有分辨率?

http://jsfiddle.net/2xvv5mod/

【问题讨论】:

    标签: css twitter-bootstrap flexbox


    【解决方案1】:

    您需要为 flexbox 项指定 width100%

    在这种情况下,就是.content 元素:

    Updated Example

    body {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
    }
    .content {
        flex: 1;
    }
    @media only screen and (max-width: 768px) {
        .content {
            width: 100%;
        }
    }
    

    【讨论】:

    • 酷,我认为最好将它应用到最大宽度:768px。 jsfiddle.net/2xvv5mod/1
    • @karaokyo 哦,好点。即使您说是,我也没有意识到您正在使用 Bootstrap。
    • 我实际上最终选择了max-width: 100%
    【解决方案2】:

    Bootstrap 4 现在默认使用 flexbox,因此更容易获得粘性(非固定)页脚,无需为 flexbox 附加 CSS。你只需要确保正文有min-height...

    body {
      min-height: 100vh; 
    }
    

    然后使用 flexbox 实用程序类...

    <body class="d-flex flex-column">
      <nav></nav>
      <main class="flex-grow"></main>
      </footer></footer>
    </body>
    

    Bootstrap 4 Flexbox Sticky Footer

    【讨论】:

    【解决方案3】:

    我建议消除一些混淆,因为 sn-p 与 linked details 并不真正匹配。另外它有一个错字。只是让框架标签作为固定点。

    <body class="d-flex flex-column">
      <nav></nav>
      <section class="container-fluid flex-grow-1"></section>
      <footer></footer>
    </body>
    

    【讨论】:

    • 是的flex-grow-1 是正确的,但身体风格需要是min-height: 100vh;
    【解决方案4】:

    添加垂直高度对我有用

    <body class="d-flex flex-column min-vh-100">
        <nav>this is text</nav>
        <main class="flex-grow-1">this is text</main>
        </footer>this is text</footer>
    </body>
    

    【讨论】:

      猜你喜欢
      • 2015-01-07
      • 2018-10-29
      • 2016-07-02
      • 1970-01-01
      • 1970-01-01
      • 2017-11-04
      • 1970-01-01
      • 2018-08-17
      • 2017-03-17
      相关资源
      最近更新 更多