ブートストラップメイン100の高さ

ブートストラップで100％の高さにするにはどうすればよいでしょうか？私は通常、ブートストラップダッシュボードテンプレートを持っています。私は何とかcalc(100vh - 72px)で成功しました。ここで、72はnavbarの高さですが、エレガントではありません。これを達成するためのあなたの好みのアプローチは何ですか？私はちょうどそれをテストブートストラップメイン100の高さ

<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

感謝。小さな画面では、ボットとトップの高さが非常に高いので、メインを非常に遠くに押し込むようです。しかし、非常に近い。 –

モバイル用パッドリングトップを減らすようにしてください。 –

は完全に機能します。ありがとう！ –

ブートストラップメイン100の高さ

答えて

関連する問題