Fatal编程技术网

Twitter bootstrap 引导主100高度

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 引导主100高度,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,在bootstrap中，使列达到100%高度的最佳方法是什么？我有一个典型的引导仪表板模板。我用calc100vh-72px取得了一些成功，其中72是导航栏的高度，但它看起来并不优雅。您首选的实现方法是什么 html， 身体 .wrapper， .包装内部， .侧边栏， 梅因先生{ 身高：100%； } .容器液体{ 填充顶部：81px；/*等于导航栏高度*/ } @Html.ActionLinkApplication名称、索引、主页、新{area=}、新{@class=navbar bran

在bootstrap中，使列达到100%高度的最佳方法是什么？我有一个典型的引导仪表板模板。我用calc100vh-72px取得了一些成功，其中72是导航栏的高度，但它看起来并不优雅。您首选的实现方法是什么

html， 身体 .wrapper， .包装内部， .侧边栏， 梅因先生{ 身高：100%； } .容器液体{ 填充顶部：81px；/*等于导航栏高度*/ } @Html.ActionLinkApplication名称、索引、主页、新{area=}、新{@class=navbar brand} @Html.ActionLinkHome，索引，主页 @Html.ActionLinkAbout，About，Home @Html.ActionLinkContact，Contact，Home @Html.Partial\u LoginPartial 顶部 机器人程序 这需要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>