我有一个使用 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/
我现在有匹配的高度,但它们占据了整个页面,而不是原来的行高。有没有办法使高度与行内容中最长的列的大小相同?
最佳答案
要使 .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>
关于html - body 和 html 的高度为 100%,但我仍然无法在 div 上设置高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39624128/