Question

在引导程序中使列100％高度的最佳方法是什么？我有一个典型的bootstrap仪表板模板。我以某种方式取代了calc(100vh - 72px)，其中72是导航栏的高度，但它看起来并不优雅。您实现这一目标的首选方法是什么？

<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>

Answer 1

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>

Bootstrap主要100高度

1 个答案: