0

I'm trying to use Bootstrap to make a sidebar on the left take the height of the content on the right. I've seen a few people with a vaguely similar issue, but no solution that works regardless of the size of the content on the right.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Sidebar</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<style>  
    html,body {
      height:100%;
      background-color:#000;
    }
    .container {
      height:100%;
    }
    .main-row {
      margin-left:0;
      margin-right:0;
    }
    .fill {
      width:100%;
      height:100%;
      min-height:100%;
      padding:0px;
    }
    .sidebar
    {
      background: #F0F0F0;
      height:100%;
      min-height:100%;
    }
    .main-content-area
    {
      background: #fff;
    }
</style>


</head>
<body>

   <div class="row main-row fill">
    <div class="col-sm-2 sidebar hidden-xs">
        <h3>Navigation</h3>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-5 col-xs-12 main-content-area">
        <h1 class="page-header">Content</h1>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

I would like ideally to solve this using CSS, and not JQuery as some solutions suggest. I'm sure it's possible, just not sure how.

Any help appreciated, thanks!

EDIT: I have reviewed my structure as suggested:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Sidebar</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <style>  
        html,body {
          height:100%;
          background-color:#000;
        }
        .container {
          height:100%;
        }
        .main-row {
          margin-left:0;
          margin-right:0;
        }
        .fill {
          width:100%;
          height:100%;
          min-height:100%;
          padding:0px;
        }
        .sidebar
        {
          background: #F0F0F0;
          height:100%;
          min-height:100%;
        }
        .main-content-area
        {
          background: #fff;
        }
    </style>


</head>
<body>

   <div class="row main-row fill">
    <div class="col-sm-2 sidebar hidden-xs">
        <h3>Navigation</h3>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="col-sm-10 col-xs-12 main-content-area">
        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>

        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>

        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>

        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>

        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>

        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>


        <div class="row main-row fill">
            <div class="col-sm-12 col-xs-12 main-content-area">
                <h1 class="page-header">Content</h1>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>
    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

The issue seems to persist... :(

jcbmb
  • 115
  • 10

2 Answers2

1

@jcbmb the way you have designed the grid seems to be the cause of this problem.

  1. first divide the page into 2 columns (sidebar, content)
  2. then divide the 2nd column into multiple rows and separate content divs

some structure below:

div.row
 div.col-sm-2 //sidebar
 div.col-sm-10 //content
   div.row
     div.col-sm-6 //content cell
     div.col-sm-6 //content cell
   div.row
     div.col-sm-6 //content cell
     div.col-sm-6 //content cell
... ...

Note: you have to use col-sm-6 not col-sm-5 to divide equally

user2648008
  • 152
  • 4
  • Thanks for your suggestion, I have revised my structure as suggested but the issue persists... :( See edit in the question. – jcbmb May 11 '17 at 14:28
0

CSS is for the styles, for functionalities like getting the top of a DOM element you can use Jquery the height() method.

With CSS it is impossible to get the height of a DOM element, what you can do with CSS is to set the height of the DOM element.

My recommendation: use Jquery only need the height() method

Harol Rodriguez
  • 189
  • 1
  • 2
  • 11
  • Thanks, I'm trying to avoid using JS, I'm sure there's a way to do this... Might resort to it if there really isn't though... – jcbmb May 11 '17 at 14:37