Robert Prine Robert Prine - 2 months ago 8
CSS Question

100% height on body and html, but I still can't set height on divs

I have a double column html setup using Bootstrap:

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




I don't understand why my second .leftSide div is not going the full height of its parent row with the CSS styling I currently have:

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


I can give a specific height, but I want it to be responsive. I have tried finding the answer and most posts say to make sure that the parent div has a height. I tried to make sure that all possible parents had a height, so what am I missing? Thanks in advance for any help! :)

EDIT *** Here is a JS fiddle of where I currently am: https://jsfiddle.net/DTcHh/25309/

I have the heights matching now, but they are taking up the whole page instead of just what the rows height was originally. Is there a way around this so that the height is the same size as the longest column in the row's content?

L J L J
Answer

The first row is obeying the height as you have the same set of elements and that comes with the same set of styles.

First Row

But this is not the case with second row. You have composite set of elements in first and second column which comes with different set of styles and the height varies accordingly.

Second Row

Suggestions and solutions:

  • Either style the elements in both columns in the second row to make sure that their parent row take same height (not good as it may result in issues in future)
  • Manage the size using JavaScript (not recommended as our first approach here should be CSS)
  • Flex box
  • Make the row think it is a table; set display: table to row and display: table-cell to col-
  • .row-eq-height using Flexbox
  • Make sure that the first / second column have a predefined height.
  • Set a new class, say, row2 to second row and set a min-height like below

Markup:

<div class="row row2">
    <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>

Style:

.row2 > * {
    min-height: 190px;
}

Full Markup if anyone want to experiment:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bootstrap Height Test</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <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%;
        }

        .row2 > * {
            min-height: 190px;
        }
    </style>
</head>
<body>
    <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 row2">
                    <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>
    </div>

</body>
</html>
Comments