Solved

100% height web app - responsive design - zurb foundation

Posted on 2014-04-18
3
1,705 Views
Last Modified: 2014-05-05
i'm moving my app to responsive design
the height of the app uses 100% of the browser
i use scroll bars within certain divs

i'm currently using javascript to resize the app to 100% of the browser height, but its clunky

is there anything new in html5 or css3 that will allow me to do that?
i'm using foundation for the responsive design element

any help and advice appreciated
0
Comment
Question by:websss
  • 2
3 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40011817
Bootstrap has a sticky footer but with foundation, you have to make your own.  There is a css sticky footer project http://www.cssstickyfooter.com/

Here I have chopped up one of their examples http://foundation.zurb.com/templates/blog.html and took out most of the content and used the css from sticky footer.  It seems to do the trick.  Here is a working sample for the code below http://jsbin.com/qucet/2/

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Template | Blog</title>

    
    <meta name="description" content="Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more." />
    
    <meta name="author" content="ZURB, inc. ZURB network also includes zurb.com" />
    <meta name="copyright" content="ZURB, inc. Copyright (c) 2013" />

    <link rel="stylesheet" href="http://foundation.zurb.com/assets/css/templates/foundation.css" />
    <script src="../assets/js/modernizr.js"></script>
    <style>
      How to Use the Sticky Footer Code
Be sure to read the Known Issues at the bottom of this page. It will help prevent a lot of mistakes that can take hours to debug.
Introduction

There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
Ryan Fait's solution is well known, and it works, but it requires an extra <div> with no content in it to provide an extra "push". Some HTML purists may find this a blasphemous use of non-semantic code. Our solution avoids the extra <div>.
The Sticky Footer solution presented here is based upon the information found in the Exploring Footers article from A List Apart as well as expands upon the work of Cameron Adams and this piece at lwis.net.
In an early version it applied a clear fix hack to keep the footer in place in Google Chrome and other browsers where the footer would float up when you resized the window. Instead, after some feedback, this updated version simply uses overflow:auto, suggested by Joel Pittet, to do the same task. Paul O'Brian suggested the addition of display:table for IE 8, as well his sticky footer article here got a nice suggestion for a fix in Opera which we used here as well. It's been tested in over 50 browsers and seems to work great.
The HTML Code

Below is the basic structure of the HTML code. You'll notice how the footer <div> sits outside of the wrap <div>.
<div id="wrap">

	<div id="main">

	</div>

</div>

<div id="footer">

</div>
You would place your content elements inside the main <div>. For example, if you were using a 2 column floating layout you might have this;
<div id="wrap">

	<div id="main">

		<div id="content">

		</div>

		<div id="side">

		</div>

	</div>

</div>

<div id="footer">

</div>
A header could be placed inside the wrap but above the main like this;
<div id="wrap">

	<div id="header">

	</div>

	<div id="main">

	</div>

</div>

<div id="footer">

</div>
If you wanted to place any elements outside of either the wrap or the footer then you would need to use absolute positioning else it messes up the 100% height calculations.
The CSS Code

Below is the CSS code that makes your sticky footers actually stick to the bottom.
html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

      </style>
  </head>
  <body>
    
<div id="wrap">
<!-- Nav Bar -->

  <div class="row">
    <div class="large-12 columns">
      <div class="nav-bar right">
       <ul class="button-group">
         <li><a href="#" class="button">Link 1</a></li>
         <li><a href="#" class="button">Link 2</a></li>
         <li><a href="#" class="button">Link 3</a></li>
         <li><a href="#" class="button">Link 4</a></li>
        </ul>
      </div>
     
      <hr />
    </div>
  </div>

  <!-- End Nav -->


  <!-- Main Page Content and Sidebar -->

  

	<div id="main">
 <h1>Blog <small>This is my blog. It's awesome.</small></h1>
	</div>

</div>



  <!-- Footer -->

  <footer id="footer" class="row">
    <div class="large-12 columns">
      <hr />
      <div class="row">
        <div class="large-6 columns">
          <p>&copy; Copyright no one at all. Go to town.</p>
        </div>
        <div class="large-6 columns">
          <ul class="inline-list right">
          
            <li><a href="#">Link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
    <script src="http://foundation.zurb.com/assets/js/jquery.js"></script>
    <script src="http://foundation.zurb.com/assets/js/templates/foundation.js"></script>
    <script>
      $(document).foundation();

      var doc = document.documentElement;
      doc.setAttribute('data-useragent', navigator.userAgent);
    </script>
  </body>
</html>

Open in new window

0
 

Author Comment

by:websss
ID: 40012015
Thanks
I'm not sure this is what I need though

Let me explain and you can tell me if it will work

On a desktop. Computer,  when you load the app it will mainly show 3 divs
Header,  left panel and right panel
Sometimes the right panel will scroll,  but the header and left panel are always visible

Hope that explains it?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40012533
http://jsbin.com/yuzaj/1/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
      #header{
        position:fixed;
        right: 0;
        left: 0;
        height:50px;
        z-index: 1030;
      }
    #main{
      padding-top:55px;
      max-height:5500px;
      overflow:scroll;
      
    }
      .row{width:100%;}
      .col{float:left;} 
    .left{width:400px;}
      .right{width:150px;
        max-height:400px;
        overflow:scroll;}
      
  </style>
</head>
<body>
  <div id="header">I am the top</div>
  <div id="main">
  <div class="row">
    <div class="col left">I am left</div>
    <div class="col right"><ul>
      <li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li><li>I am rightI am right</li>
      </ul>
      </div>
    </div>
  </div>
</body>
</html>

Open in new window

0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Read about why website design really matters in today's demanding market.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

758 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

23 Experts available now in Live!

Get 1:1 Help Now