使用Bootstrap 4不能在页眉和页脚之间产生100％的div高度

时间：2017-12-03 21:57:01

标签： html css twitter-bootstrap bootstrap-4

这篇文章可能听起来像是重复但不是，请先阅读。

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

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

// Initialize popover component
$(function () {
    $('[data-toggle="popover"]').popover()
})
＆＃13; 
.container{
    width: 100%;  min-height: 100% !important;
    min-height:calc(100% - 110px); !important;
    margin: 0 auto -33px; 
    border: solid blue; 
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

我已经用Google搜索了，我已经应用了以下帖子的方法：

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

请帮忙！

3 个答案:

答案 0 :(得分：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

答案 1 :(得分：2)

Flexbox也是你的朋友。

  

但是，在您进一步阅读之前：由于alpha已经用完，您不应再使用beta 2版本的Bootstrap 4！

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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"/>
＆＃13;
＆＃13;
＆＃13;

基本上这个解决方案使body成为一个灵活容器，其中的项目堆放在列中。有了这个，flex: 1;上<main>延伸<main>以填充可用高度并将<footer>推入底部。因此不再需要.fixed-bottom。

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

＆＃13;
＆＃13; 
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; 
}
＆＃13; 
<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"/>
＆＃13;
＆＃13;
＆＃13;

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

答案 2 :(得分：0)

检查代码段。我修复了您的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>

  

注意：这不是防弹解决方案。你需要尝试更多的解决方案。我只是告诉你如何克服这类问题。现在你靠自己。

相关问题
最新问题