无法使用 Bootstrap 4 在页眉和页脚之间制作 100% div 高度

【问题标题】：Can't make 100% div height between header and footer with Bootstrap 4无法使用 Bootstrap 4 在页眉和页脚之间制作 100% div 高度
【发布时间】：2018-05-17 08:27:25
【问题描述】：

这篇文章听起来像是重复的，但事实并非如此，请先阅读。

我希望主容器 (<main role="main" class="container">) 使用 Bootstrap 4 在页眉和页脚之间保持全高。这是我的 html 代码：

// Initialize tooltip component
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function () {
    $('[data-toggle="popover"]').popover()
})
.container{
    width: 100%;  min-height: 100% !important;
    min-height:calc(100% - 110px); !important;
    margin: 0 auto -33px; 
    border: solid blue; 
}
<!DOCTYPE html>
<title>My Example</title>

<!-- Latest compiled and minified Bootstrap CSS -->
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<header>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#" data-placement="right" data-animation="false" data-toggle="tooltip" title="Aller à Mes Summaries">
            My Logo</a>
    </nav>
</header>

<!-- Begin page content -->
<main role="main" class="container">
    <div class="row mt-3" style="border: solid green">
        <div class="col-sm-12 col-md-3" style="border: solid red; height: 200%;">col</div>
        <div class="col-sm-12 col-md-5">col</div>
        <div class="col-sm-12 col-md-4">col</div>
    </div>
</main>

<footer>
    <nav class="navbar navbar-toggleable-md navbar-inverse fixed-bottom bg-inverse" style="height: 10%;">
    </nav>
</footer>


<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

我已经google了，我已经应用了以下帖子的方法：

还有更多……但在我的情况下没有任何作用。

请帮忙！

【问题讨论】：

  • 首先，我认为我们需要更多的 css 才能让其他元素正确回答（最好是这里的一个工作示例或例如小提琴），其次在 @987654331 中有一个错误的 ; @

标签： html css twitter-bootstrap bootstrap-4


【解决方案1】：

Flexbox 也是你的朋友。

但是，在您进一步阅读之前：您不应该再使用 Bootstrap 4 的 alpha 版本，因为 beta 2 已经过时了！

.container {
    border: solid blue; 
}

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

main {
    flex: 1;
    margin-top: 56px;
}

footer {
    height: 10vh;
}
<header>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#" data-placement="right" data-animation="false" data-toggle="tooltip" title="Aller à Mes Summaries">My Logo</a>
    </nav>
</header>


<!-- Begin page content -->
<main role="main" class="container">
    <div class="row mt-3" style="border: solid green">
        <div class="col-sm-12 col-md-3" style="border: solid red; height: 200%;">col</div>
        <div class="col-sm-12 col-md-5">col</div>
        <div class="col-sm-12 col-md-4">col</div>
    </div>
</main>

<footer>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse h-100"></nav>
</footer>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

基本上，这个解决方案使body 成为一个弹性容器，它的项目堆叠成列。有了它，&lt;main&gt; 上的flex: 1; 会拉伸&lt;main&gt; 以填充可用高度并将&lt;footer&gt; 推入底部。有了.fixed-bottom，就不再需要了。

更新： 我已经更新了上面的标记以符合 Bootstrap 4 beta 2。如下：

html {
    height: 100vh;
}

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

main {
    flex: 1;
    margin-top: 56px;
}

footer {
    height: 10vh;
}

.container {
    border: solid blue; 
}
<header>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#" data-placement="right" data-animation="false" data-toggle="tooltip" title="Aller à Mes Summaries">My Logo</a>
    </nav>
</header>

<!-- Begin page content -->
<main role="main" class="container">
    <div class="row mt-3" style="border: solid green">
        <div class="col-sm-12 col-md-3" style="border: solid red; height: 200%;">col</div>
        <div class="col-sm-12 col-md-5">col</div>
        <div class="col-sm-12 col-md-4">col</div>
    </div>
</main>

<footer>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-dark h-100"></nav>
</footer>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

要将您的标记从alpha 6 更新为beta 2，您必须进行以下更改：将.navbar-expand-md 重命名为.navbar-expand-md，将.navbar-inverse 重命名为.navbar-dark，并将.bg-inverse 重命名为.bg-dark。

【讨论】：

    【解决方案2】：

    检查 sn-p。我修复了你的 code 并更改了 html。此时主要内容应该是fixed position，footer应该是fixed height。

    // Initialize tooltip component
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

    // Initialize popover component
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
    main{
  height: calc(100% - 54px - 30px); /* Height should 100% - header height - footer height */
  left: 0;
  overflow-x: hidden; /* If you need scrollbar */
  overflow-y: auto;/* If you need scrollbar */
  position: fixed;
  top: 54px; /* Header height */
  width: 100%;
  z-index: 1;
  background-color: #f5f5f5;
  border: 5px solid #ff0000;
}
    <!DOCTYPE html>
<title>My Example</title>

<!-- Latest compiled and minified Bootstrap CSS -->
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<header>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#" data-placement="right" data-animation="false" data-toggle="tooltip" title="Aller à Mes Summaries">
            My Logo</a>


    </nav>
</header>

<!-- Begin page content -->
<main role="main">
  <div class="container">
    <div class="row mt-3" style="border: solid green">
        <div class="col-sm-12 col-md-3" style="border: solid red; height: 200%;">col</div>
        <div class="col-sm-12 col-md-5">col</div>
        <div class="col-sm-12 col-md-4">col</div>
    </div>
    </div>
</main>

<footer>

    <nav class="navbar navbar-toggleable-md navbar-inverse fixed-bottom bg-inverse" style="height: 30px;">




    </nav>
</footer>


<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    注意：这不是万无一失的解决方案。您需要尝试更多以获得好的解决方案。我只是向您展示如何克服此类问题。现在你一个人。

    【讨论】：

      【解决方案3】：

      使用较新的 Bootstrap 4.4.x 类重新审视这个问题（不需要额外的 CSS）

      <div class="d-flex flex-column overflow-hidden min-vh-100 vh-100">
   <header>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            ...
        </nav>
   </header>
   <main role="main" class="flex-grow-1 overflow-auto">
        <div class="container">
            <div class="row mt-3">
                <div class="col-sm-12 col-md-3">
                    Aside
                </div>
                <div class="col"> 
                    Main
                </div>
            </div>
        </div>
   </main>
   <footer class="container-fluid flex-grow-0 flex-shrink-1">
       ...
   </footer>
</div>

      结果是一个全高布局的页眉/导航、页脚和中间的滚动主要内容区域。无论页面高度如何，页脚始终位于底部。

      https://codeply.com/p/AvV1RvudwC

      【讨论】：

      • 不错的答案，效果很好。仅注意：我必须将mb-0 添加到&lt;body&gt; 标签以避免底部自动引导正文边距为60px，如下所示：&lt;body class="mb-0"&gt;。干杯！
      • @Zim 效果很好！不得不问 - 你是怎么做到的？数小时痛苦的试错？因为，尝试在没有指南的情况下完成这个工作可能是我长期以来所做的最令人沮丧的事情。我正要彻底毁掉 BS。
      猜你喜欢
      • 2013-04-25
      • 2019-08-11
      • 2012-04-30
      • 2015-08-09
      • 2015-08-17
      • 2021-12-27
      • 2019-05-05
      • 1970-01-01
      • 2012-07-07
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode