How to have two columns of the same height with different content?

Question

I am using bootstrap to design a site. The site has a menu bar on the left and the content on the right. Everything works great, but the customer wants the background colour of the menu side to be the same height as the content side.
I have tried using height:100%, it makes the height bigger but not to the exact same height as the content.

A working link can be found here Link

My html is as follows

<html>
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">    
    <link href="css/my-style.css" type="text/css" rel="stylesheet">
</head>
<body> 
    <div class="container-fluid">
    <div class="container row">
    <div  class="col-sm-3">
        <nav id="NavDetails" class="navbar navbar-default" role="navigation">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div  class="collapse navbar-collapse">
                <div id="TitleNav" class="panel-heading">Online Services</div>
                <ul class="nav nav-stacked">
                        <ul class="nav nav-pills nav-stacked">
                            <li> <a href="#">Menu 1</a> </li>
                            <li> <a href="#">Menu 2</a> </li>
                            <li> <a href="#">Menu 3</a> </li>
                            <li> <a href="#">Menu 4</a> </li>
                            <li> <a href="#">Menu 5</a> </li>
                            <li> <a href="#">Menu 6</a> </li>
                            <li> <a href="#">Menu 7</a> </li>
                            <li> <a href="#">Menu 8</a> </li>
                            <li> <a href="#">Menu 9</a> </li>
                            <li> <a href="#">Menu 10</a> </li>
                            <li> <a href="#">Menu 11</a> </li>
                            <li> <a href="#">Menu 12</a> </li>
                        </ul>    
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>

    </div><!--/end left column-->

    <div  class="col-sm-9">

        <div id="ContentDetails" class="container">     
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 title-label">Test data</div>          
            </div>
    </div>  
    </div>

</div>

 </div>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

The CSS style file is

@media screen and (max-width: 768px) {  
  .title-label {
    font-size: 12px; 
    color: blue;    
    margin-bottom: 5px;
  } 
  .instruction-label {
    font-size: 8px;         
    margin-bottom: 5px;
  }  
   #COESTitle  {
    font-size: 12px; 
    font-weight: bold;  
    margin-top: 5px;
  }
  .heading-row{
    margin-top: 5px;        
    margin-bottom: 5px;     
  }  
  .heading-label {
    font-size: 12px; 
    font-weight: bolder;        
  }  
  .details-label  { 
    font-size: 12px; 
    font-weight: bolder;                
  }  
  .text-row{    
    padding-left:10px;  
  }  
  .text-label{  
    font-size: 12px;                
  }  
 .text-value{   
    font-size: 12px; 
    font-weight: bolder;        
  } 
  .input-row{
    margin-bottom: 5px;  
  }

  #SocketsDetails  {    
    margin-bottom: 5px;
  }

 .electrical-work-undertaken-spacing{
    margin-top: 5px;
    margin-bottom: 5px; 
  } 

    #Footer
{
    background-color: #d3d3d3;
    height:40px;
    padding-top: 10px;
    padding-left: 40px;
    font-size: 10px;

}

 #NavDetails{

    height: auto;
 }


}


@media screen and (min-width: 768px) { 
 .title-label {
    font-size: 16px; 
    color: blue;    
    margin-bottom: 10px;
  }  
 .instruction-label {
    font-size: 12px;        
    margin-bottom: 10px;
  }  
 #COESTitle  {
    font-size: 16px; 
    font-weight: bold;  
    margin-top: 10px;
  }
 .heading-row{
    margin-top: 10px;
    margin-bottom: 10px;    
  }  
 .heading-label {
    font-size: 16px; 
    font-weight: bold;                  
  }  
 .details-label  {      
    font-size: 16px; 
    font-weight: bolder;        
  }  
 .text-row{ 
    padding-left:20px;  
  }  
 .text-label{   
    font-size: 16px;                
  }  
 .text-value{   
    font-size: 16px; 
    font-weight: bolder;        
  } 
  .input-row{
    margin-bottom: 10px;  
  }

  #SocketsDetails  {    
    margin-bottom: 10px;
  }

   .electrical-work-undertaken-spacing{
    margin-top: 10px;
    margin-bottom: 10px;    
  } 

  #Footer
{
    background-color: #d3d3d3;
    height:40px;
    padding-top: 10px;
    padding-left: 40px;
    font-size: 14px;

}


 #NavDetails{

    height: 100%
 }


}

 #CertDetails{
    border-width: 1px;
    border-style: solid;
}

 #ContentDetails{
    padding-left: 0;
    margin-left: 0;
}

 .mandatory-field{
    color: red;
}

 .type-of-prescribed_checkbox{
    position: relative;
    display: block;
}

 .type-of-prescribed_checkbox  label {
    padding-right: 10px;
}

 .type-of-prescribed_checkbox  label input[type="checkbox"] {
    margin-left: 5px;
}

 #ButtonGroup
{
    text-align: right;
    margin-top: 10px;
    margin-bottom: 10px;
}

 #NavDetails{
    background-color: rgb(0, 102, 203);     
 }

 #TitleNav
 {
    color: #ccff33; 
    text-decoration: underline;
 }

 #NavDetails ul a 
 {
    color: #FFF; 
 }

 .nav>li>a:hover, .nav>li>a:focus
{
    background-color: transparent;

}


#FooterContainer
{   
    padding-left: 30px;
}

 #HeaderContainer{
    margin-top: 10px;
    margin-bottom: 10px;
}



img {
          display: block;
          height: auto;
          max-width: 100%;
   }


   div.image {


   background-image: url("../images/buton-bottom.jpg"); 
   background-repeat: x-repeat; 

 height: 11px;

}

score 0 · Answer 1 · edited May 23 '17 at 10:30

0

This SO should help: How can I make Bootstrap columns all the same height?

My personal favorite method is the extremely large padding with negative margin trick because it is so weird.

edited May 23 '17 at 10:30

Community

1
1

answered Oct 24 '14 at 04:54

peterjb

819
7
6

score 0 · Answer 2 · answered Oct 24 '14 at 06:20

Try this Trick :)

LIVE DEMO

HTML:

<div class="container">
            <div class="row">
                <div id="div1" style="background-color: lightgray" class="col-md-6">
                    hi<br />
                    hi<br />
                    hi<br />
                    hi<br />
                    hi<br />
                    hi<br />
                    hi<br />
                </div>
                <div id="div2" style="background-color: lightgreen" class="col-md-6">
                    ff
                </div>
            </div>
        </div>

SCRIPT:

$(document).ready(function () {

            DivHeight();
        });

        function DivHeight() {
            var div1Height = $("#div1")[0].clientHeight;
            var div2Height = $("#div2")[0].clientHeight;
            var commonHeight;
            if (div1Height > div2Height) {
                commonHeight = div1Height + 'px';
            } else {
                commonHeight = div2Height + 'px';
            }
            $("#div1").css('height', commonHeight);
            $("#div2").css('height', commonHeight);
        }

How to have two columns of the same height with different content?

2 Answers2

LIVE DEMO