Solved

Bootstrap 3 one true height approach

Posted on 2014-01-22
11
566 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 53

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
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.

 

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
 

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 53

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

617 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