[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

100% height web app - responsive design - zurb foundation

Posted on 2014-04-18
3
Medium Priority
?
1,879 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 54

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 54

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

How do you create a user-centered user experience on your website? And what are some things you should consider in the process?
The Super Bowl is just days away. Millions of advertising dollars will be spent in just a few hours to drive people to websites around the globe. Optimizing your site in anticipation of a big event like this (and the traffic surges that follow) will…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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…
Suggested Courses

612 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