Place a div container BELOW the default viewport

I'm building a small webapp and I'm trying to create a div arrangment that I can't get to work.

I'm trying to do something 开发者_StackOverflow社区like this:

+------------------+  <--+
|top bar           |     |
+------------------+     |  (main section)
|                  |     |
|main content      |     +- Viewport
|                  |     |
|                  |     |
|------------------+     |
|bottom bar        |     |
|------------------+ <---+
|extra details,    |
|history, etc..    |       (secondary section)
|                  |
|                  |
|footer            |
+------------------+

In such way that the can see the main section by default, and if he scrolls he then sees the secondary section.

I've been able to create the main section by creating a container:

#viewport {
  min-height: 100%;
  top: 0px;
  left: 0px;
  right: 0px;

  padding: 0px;
  border: 0px;
  margin: 0px;
}

However, I have yet to find a way to set the secondary container below the main container, position: relative; places the secondary container behind the main container.

Is it even possible to do something like this??

Thanks in advance,

I finally got it to work!! Here's what I did:

In my common.css:

/* MAIN SECTIONS */
#viewport {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;

  /* should be automatically set by javascript
  height: 600px; */
}

#scrollport {
  position: absolute;
  right: 0px;
  left: 0px;

  /* should be automatically set by javascript 
  top: 600px; /* same as viewport height */
}

Then, I adapted the script I found here to make it into a function:

function getViewPortHeight(){
var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportheight = window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportheight = document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
return viewportheight
}

And then created this other function to set my divs according to what I wanted:

function changeHeight(){ 
// SET THE viewport CONTAINER
// get the div element (viewport)
vwport = document.getElementById('viewport');

// set the height
vwport.style.height = getViewPortHeight() + "px";

// SET THE scroll CONTAINER
// get the div element (scroll)
scrll = document.getElementById('scrollport');
// set the top position
scrll.style.top = getViewPortHeight() + "px";
}

And finally, this command to actually update the div size:

onload = changeHeight;

It was much more complicated to what I initially thought it would be, but at least I get to enjoy the satisfaction of seeing it working!

Thanks!

Yes it is possible to do it.

You can give link for extra information at end of main viewport. And when user clicks on it display the secondary content. By this you can give user a choice to see extra stuff or not and also your problem will be solved. You can achieve this using css property visibility or display also can use Javascript to switch between property and also to give effects; if required; on viewing content like slide effect or fade effect or anything else.

Hope this helps.

I was looking to do something similar and found your question here.

Thought I'd add my solution.

CSS only:

HTML, BODY, #viewport { height:100% }

Your secondary section would need to be after #viewport in a different div.

I haven't done serious cross-browser testing yet, and since you're on mobile, you may need a META viewport tag.

Luck