使用Bootstrap 4无法在页眉和页脚之间设置100％div高度

This post could sound like a duplicate but it isn't, please read first.I want the main container (<main role="main" class="container">) to be full-height between header and footer using Bootstrap 4. Here is my html code :// 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><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><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><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>I already googled, and I've applied the methods of the following posts:css - Stretch div between header and footercss - How to create div to fill all space between header and footer div ...html - how to make DIV height 100% between header and footer ...html - Content with 100% between header and footercss - Make a div fill the height of the remaining screen space - Stack ...And a lot more… But nothing work in my situation.Please help! 解决方案 Flexbox is your friend here too..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><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"/>Basically this solution makes body a flex container with it's items stacked in columns. With that in place, flex: 1; on <main> stretches <main> to fill the available height and pushing <footer> into the bottom. With that .fixed-bottom is not needed any more.Update:I've updated the markup above to conform Bootstrap 4 beta 2. This is as follows: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><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"/>To update your markup from alpha 6 to beta 2 you have to make the following changes: rename .navbar-expand-md to .navbar-expand-md, .navbar-inverse to .navbar-dark and .bg-inverse to .bg-dark. 这篇关于使用Bootstrap 4无法在页眉和页脚之间设置100％div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！