Bootstrap main 100 height

什麼樣的最佳方法使自舉中的色譜柱達到100％的高度？我有一個典型的引導儀表板模板。我以calc(100vh - 72px)的方式取得了成功，其中72是導航欄的高度，但看起來並不高雅。你想要達到這個目標的首選方法是什麼？Bootstrap main 100 height

<body style="height:100% !important;"> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("About", "About", "Home")</li> 
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
       </ul> 
       @Html.Partial("_LoginPartial") 
      </div> 
     </div> 
    </div> 

<div class="container-fluid" style="height:100%"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-3 col-md-3 sidebar"> 
      <div> 
       top 
      </div> 
      <div style=""> 
       bot   
      </div> 
     </div> 

    </div> 
    <div class="row"> 
     <div style="padding-left:0px !important;border:1px solid red;" class="col-xs-12 col-xs-offset-0 col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 main"> 
      <div style="padding-top:0px !important;margin:0px !important;height:100%">this needs to be 100% height</div> 
     </div> 
    </div> 
</div> 


<script src="~/Scripts/jquery-3.2.1.min.js"></script> 
<script src="~/Scripts/bootstrap.min.js"></script> 
<script src="~/Scripts/holder.min.js"></script> 
<script src="~/Scripts/ie10-viewport-bug-workaround.js"></script>

來源

2017-10-21 Thomas Segato

html, 
 
body, 
 
.wrapper, 
 
.wrapper-inner, 
 
.sidebar, 
 
.main { 
 
    height: 100%; 
 
} 
 

 
.container-fluid { 
 
    padding-top: 81px; /* equal to navbar height */ 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<body style="height:100% !important;"> 
 

 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
 
      </div> 
 
      <div class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav"> 
 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
 
        <li>@Html.ActionLink("About", "About", "Home")</li> 
 
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
 
       </ul> 
 
       @Html.Partial("_LoginPartial") 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="container-fluid wrapper" style="height:100%"> 
 

 
     <div class="row wrapper-inner"> 
 
      <div class="col-xs-12 col-sm-3 col-md-3 sidebar"> 
 
       <div> 
 
        top 
 
       </div> 
 
       <div style=""> 
 
        bot 
 
       </div> 
 
      </div> 
 
      <div style="border:1px solid red;" class="col-xs-12 col-sm-9 main"> 
 
       <div style="padding-top:0px !important;margin:0px !important;height:100%">this needs to be 100% height</div> 
 
      </div> 
 
     </div> 
 
    </div>

來源

2017-10-26 12:03:26

謝謝，我只是測試它。看起來在小屏幕上，機器人和頂部的高度非常高，所以它將主機推得很遠。但非常接近。 –

嘗試通過減少移動的填充頂部 –

完美的作品。謝謝！ –

Bootstrap main 100 height

回答

相關問題