html - body 和 html 的高度为 100%，但我仍然无法在 div 上设置高度

Question

我有一个使用 Bootstrap 的双列 html 设置:

<div class="container-fluid">
<div class="row fullHeight">
    <div class="col-sm-3 col-lg-2">
        <nav class="navbar navbar-default navbar-fixed-side">
            <img src="assets/images/favicon.ico" class="logo">
            <ul>
                <li><a href="#">Getting Started</a></li>

                <li class="subLi"><a href="#">API Credentials</a></li>
                <li class="subLi"><a href="#">Authentication</a></li>
                <li class="subLi"><a href="#">Best Practices</a></li>
                <li class="subLi"><a href="#">Pagination</a></li>
                <li class="subLi"><a href="#">Rate Limits</a></li>
                <li class="subLi"><a href="#">Time</a></li>
                <li class="subLi"><a href="#">Webhooks</a></li>

                <li><a href="#">API Reference</a></li>

                <li class="subLi"><a href="#">Lock</a></li>
                <li class="subLi"><a href="#">LockCommand</a></li>
                <li class="subLi"><a href="#">LockEvent</a></li>
                <li class="subLi"><a href="#">OAuth Token</a></li>
                <li class="subLi"><a href="#">User</a></li>

            </ul>
        </nav>
    </div>
    <div class="col-sm-9 col-lg-10">

        <div class="row">
            <div class="col-sm-6 col-lg-6 leftSide">
                <h1>Description</h1>
                <h3>Returns information about the current user</h3>
            </div>
            <div class="col-sm-2 col-lg-2 rightSide">
                <h1>Method</h1>
                <h3>Get</h3>
            </div>
            <div class="col-sm-4 col-lg-4 rightSide">
                <h1>URL</h1>
                <h3>/me</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-lg-6 leftSide">
                <h4>Request Properties</h4>
                <p>None</p>
                <h4>Response Properties</h4>
                <p>Returns a <a href="#" class="modalLink">User</a> object</p>
            </div>
            <div class="col-sm-6 col-lg-6 rightSide">
                <h4>Example Request</h4>
                <pre>GET /me</pre>
                <h4>Example Response</h4>
                <pre>HTTP/1.1 200 OK</pre>
                <pre id="_me"></pre>
            </div>
        </div>

    </div>
</div>

我不明白为什么我的第二个 .leftSide div 没有使用我当前拥有的 CSS 样式达到其父行的整个高度:

html, body, .row {
  height: 100%;
  margin: 0;
  padding: 0;
}
.leftSide {
  background-color: #00a3da;
  color: white;
  height: 100%;
  min-height: 100%
}

.rightSide {
  background-color: white;
  color: black;
  height: 100%;
  min-height: 100%
}

我可以给出一个特定的高度，但我希望它能够响应。我试图找到答案，大多数帖子都说要确保父 div 有高度。我试图确保所有可能的 parent 都有高度，那我错过了什么？在此先感谢您的帮助! :)

编辑 *** 这是我目前所在位置的 JS fiddle :https://jsfiddle.net/DTcHh/25309/

我现在有匹配的高度，但它们占据了整个页面，而不是原来的行高。有没有办法使高度与行内容中最长的列的大小相同？

Answer 1

要使 .leftside 达到 100% 高度，您需要为所有父 div 设置 height:100%。我将 'style="height:100%"' 添加到 .container-fluid,.col-sm-9 .col-lg-10 尝试使用:

<style>
html, body, .row {
  height: 100%;
  margin: 0;
  padding: 0;
}
.leftSide {
  background-color: #00a3da;
  color: white;
  height: 100%;
  min-height: 100%
}

.rightSide {
  background-color: white;
  color: black;
  height: 100%;
  min-height: 100%
}

<div class="container-fluid" style="height:100%">
<div class="row fullHeight" style="height:100%">
    <div class="col-sm-3 col-lg-2">
        <nav class="navbar navbar-default navbar-fixed-side">
            <img src="assets/images/favicon.ico" class="logo">
            <ul>
                <li><a href="#">Getting Started</a></li>

                <li class="subLi"><a href="#">API Credentials</a></li>
                <li class="subLi"><a href="#">Authentication</a></li>
                <li class="subLi"><a href="#">Best Practices</a></li>
                <li class="subLi"><a href="#">Pagination</a></li>
                <li class="subLi"><a href="#">Rate Limits</a></li>
                <li class="subLi"><a href="#">Time</a></li>
                <li class="subLi"><a href="#">Webhooks</a></li>

                <li><a href="#">API Reference</a></li>

                <li class="subLi"><a href="#">Lock</a></li>
                <li class="subLi"><a href="#">LockCommand</a></li>
                <li class="subLi"><a href="#">LockEvent</a></li>
                <li class="subLi"><a href="#">OAuth Token</a></li>
                <li class="subLi"><a href="#">User</a></li>

            </ul>
        </nav>
    </div>
    <div class="col-sm-9 col-lg-10" style="height:100%">

        <div class="row">
            <div class="col-sm-6 col-lg-6 leftSide">
                <h1>Description</h1>
                <h3>Returns information about the current user</h3>
            </div>
            <div class="col-sm-2 col-lg-2 rightSide">
                <h1>Method</h1>
                <h3>Get</h3>
            </div>
            <div class="col-sm-4 col-lg-4 rightSide">
                <h1>URL</h1>
                <h3>/me</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-lg-6 leftSide">
                <h4>Request Properties</h4>
                <p>None</p>
                <h4>Response Properties</h4>
                <p>Returns a <a href="#" class="modalLink">User</a> object</p>
            </div>
            <div class="col-sm-6 col-lg-6 rightSide">
                <h4>Example Request</h4>
                <pre>GET /me</pre>
                <h4>Example Response</h4>
                <pre>HTTP/1.1 200 OK</pre>
                <pre id="_me"></pre>
            </div>
        </div>

    </div>
</div>