Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

100% height web app - responsive design - zurb foundation

Posted on 2014-04-18
3
Medium Priority
?
1,847 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
[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
  • 2
3 Comments
 
LVL 53

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 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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

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.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will learn how to dynamically set the form action using jQuery.
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…

704 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