Solved

Bootstrap 3 one true height approach

Posted on 2014-01-22
11
548 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 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

12 Experts available now in Live!

Get 1:1 Help Now