asked on

Bootstrap 3 one true height approach

In the past I have fixed any div height issues by using the one true height approach.. This has always worked well and without issue...

My question is.. whats the best approach within a bootstrap 3 environment?

At the moment I have 2 columns. the first column contain an accordion and it is half the height of the second column. I'm concerned about messing around too much as i don't want to inhibit the bootstrap environment

Thanks

Gary

Since I don't know what method you are using (one true height approach???) and I assume you are using jquery. In a doc ready function.

getmaxheight = Math.max($('#sidebar').height(),$('#content).height());

$('#sidebar').height(getmaxheight);
$('#content).height(getmaxheight);

And just amend the element ids

Scott Fell

Are you talking about the old 3 column holy grail thing from the early 2000's where you can fill in all 3 columns with different colors and no matter how much content is in either they always stay the same height? I never really understood the point of that other then to try to see how to do it.

What you see to today are fixed headers and footers and bootstrap has that built in. The background is the background of the body. Take this site as example, the right column goes well below our thread and is made of of widgety looking things.

Maybe I have not understood your question though?

maddisoncr

ASKER

Thanks for your answers guys..

I'm going to put something together to explain it a bit better

Back soon ;-/

maddisoncr

ASKER

I've added a screenshot and a bit more info

Essentially i have a sidebar on the left and main content in the middle.. At the very bottom of the screen is a footer. Unless i have a lot of content, the sidebar doesn't reach the footer

I am using the following css

html,
body {
  height: 100%;
}

/* Wrapper for page content to push down footer */
#wrap {
	min-height: 100%;
  	height: auto !important;
}

.container {
 	max-width:none;
	margin-left:0;
	margin-right:0;
	width:100%;
}

#footer {
  height: 40px;
  background-color:#ADB6B5; /*Silver*/
}

.onetruefix{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#10103b; /* Dark Blue */
}

.equalheight {
   	overflow: hidden; 
	height:100%;
}

Open in new window

<div id="wrap">

	<!-- Begin page content -->
  	<div class="container contentContainer">
		
        <div class="row equalheight">
			
            <div class="col-md-2 onetruefix">
			    SIDEBAR
            </div> 
			
            <div class="col-md-10 bodycolumn">
            	MAIN CONTENT
            </div>
         
        </div>
        
 	</div>
    
 </div>    
                   
<div id="footer">	

</div>

Open in new window

I hope thats understandable as i've hacked around with the code.. I have tried using a jquery approach and that worked fine until i started resizing the screen etc...
x.png

Gary

Remove the one true css but leave it in the div class.

Add before your closing body tag.

<script>
$(function() {
getmaxheight = Math.max($('.onetruefix').height(),$('.bodycolumn).height());

$('.onetruefix').height(getmaxheight);
$('.bodycolumn).height(getmaxheight);
})
</script>

Open in new window

maddisoncr

ASKER

I've popped that code in and it chopped off the bottom of the main content..

Scott Fell

You have to do that with js/jquery where first you get the hight of the right and apply it to the left. Then if the window changes, detect and reset. http://jsbin.com/padasQ_28345437/1/

$(function () {
    rightHeight = $('#right_col').height();
    $('#left_col').height(rightHeight);

    $(window).resize(function () {
        rightHeight = $('#right_col').height();
        $('#left_col').height(rightHeight);
    });
});

Open in new window

Using the sticky footer

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
  width:100%;
}
#left_col{background-color:blue;}

Open in new window

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
  

  
  
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
   <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div id="left_col" class="col-md-3">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div id="right_col" class="col-md-9">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        
      </div><!-- row -->

  </div>

    <div id="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </div>
 
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

maddisoncr

ASKER

thanks for your comments guys and sorry for the delay. i'd got tied down on another issue.. i'l have a look at this in the morning

thanks

maddisoncr

ASKER

Great help, thanks

maddisoncr

ASKER

Thanks for the help, got it working