Bootstrap：无法为我的空内容列使用全高

Question

我对 Web 开发很陌生，对使用 bootstrap 也很陌生。我一直在尝试创建这种类型的页面：

---------------------------------------
Nav bar
---------------------------------------
             Search bar
---------------------------------------
col1                        |col2
                            |
                            |
                            |
                            |
                            |
                            |
                            |
                            |
                            |
                            |
                            |
                            |
----------------------------------------

col1 和 col2 我想利用页面的所有剩余高度（在搜索和导航栏之后）。但无论我尝试过什么，我都能做到。它总是在填充时采用内容的高度。我还希望当内容超过页面长度时显示滚动条，但最小高度应该是可能的最大高度。以下是我使用的网页代码。

@{

    ViewBag.Title = "Home";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>

    .top-buffer { margin-top:3%; }

    body,html{
        height:100%;

    }
     #outer {
        position: relative;
    }
    #outer a {
        position: absolute;
        top: 0;
        left: 0;
    }
    #outer input {
         text-indent: 16px;
    }

    .left-dotted-border{
        border-left: 1px dotted  #333;
    }

    .min-content-height{
        min-height:100%;
    }
     #dashboard-data {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: red;
    display: block;
}

}

</style>
<div class="container" id="searchBar" style="min-height:100%">
    <div class="row top-buffer">
        <div class="col-sm-12 text-center">
            <form class="form-inline" role="form" id="searchParamters">
                <div class="form-group">
                    <label for="search">Search</label>
                </div>

                <div class="form-group">
                    <label class="sr-only" for="keyword"></label>
                    <input type="text" class="form-control" id="keyword" placeholder="Enter keywords">
                </div>

                <div class="form-group">
                    <label for="tag-tree">under</label>
                </div>

                <div id="outer"class="form-group">
                    <a href="javascript:void(0)" onclick="alert('Show tag tree')"><img src="~/Content/img/Hierarchy.png" style="width:34px; height:34px"></a>
                    <input type="text" class="form-control" id="tag" placeholder="  tag">

                </div>


                <button type="submit" class="btn btn-default">Search</button>
            </form>
        </div>
    </div>


</div>
<hr size="2" />

<div id="dashboard-data" class="container-fluid">
    <div class="row">
        <div class="col-sm-8 min-content-height" style="min-height:100%">
            <div>My Content</div>

        </div>
        <div class="col-sm-4 left-dotted-border size" style="min-height:100%">
            Recommended content

        </div>

    </div>
</div>

使用的版本：Bootstrap v3.3.1，ASP.NET MVC 5

Answer 1

听起来您想给列视口高度：

height: 100vh;

详细了解 vh on CSS Tricks。

Bootstrap：无法为我的空内容列使用全高

Bootstrap: Not able to make use of full height for my empty content columns

css

twitter-bootstrap

asp.net-mvc-5

twitter-bootstrap-3