Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 576
  • Last Modified:

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
0
maddisoncr
Asked:
maddisoncr
  • 6
  • 3
  • 2
1 Solution
 
GaryCommented:
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
0
 
Scott Fell, EE MVEDeveloperCommented:
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?
0
 
maddisoncrAuthor Commented:
Thanks for your answers guys..

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

Back soon ;-/
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
maddisoncrAuthor Commented:
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
0
 
GaryCommented:
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

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

new screenshot
0
 
Scott Fell, EE MVEDeveloperCommented:
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

0
 
GaryCommented:
Missing some apostrophes

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

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

Open in new window

0
 
maddisoncrAuthor Commented:
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
0
 
maddisoncrAuthor Commented:
Great help, thanks
0
 
maddisoncrAuthor Commented:
Thanks for the help, got it working
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now