Solved

Bootstrap 3 one true height approach

Posted on 2014-01-22
11
552 Views
Last Modified: 2014-02-17
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
Comment
Question by:maddisoncr
  • 6
  • 3
  • 2
11 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39800812
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39801929
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
 

Author Comment

by:maddisoncr
ID: 39803168
Thanks for your answers guys..

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

Back soon ;-/
0
 

Author Comment

by:maddisoncr
ID: 39803261
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
 
LVL 58

Expert Comment

by:Gary
ID: 39803313
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:maddisoncr
ID: 39803376
I've popped that code in and it chopped off the bottom of the main content..

new screenshot
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39803403
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39803422
Missing some apostrophes

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

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

Open in new window

0
 

Author Comment

by:maddisoncr
ID: 39828272
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
 

Author Closing Comment

by:maddisoncr
ID: 39864521
Great help, thanks
0
 

Author Comment

by:maddisoncr
ID: 39864522
Thanks for the help, got it working
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses four methods for overlaying images in a container on a web page
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now