How to place a button in a responsive layout, in an area that has no fixed height and position: absolute? (UPDATE)

advertisements

Here's a UPDATED fiddle with my layout: http://jsfiddle.net/RDmN4/24/

HTML:

<div id="container">
<div id="header">header goes here</div>
</div>
<div id="flexible_height">
<!-- what i can't figure out -->
<a class="button" href="#" title="">button</a>
</div>
<div id="test">
<p>lorem ipsum, 2 or 3 paragraphs go here</p>
</div>
<div id="footer">footer goes here</div>

CSS:

#container
{
width:100%; max-width:100%;
position:absolute; z-index:1;
bottom:28px; top:0; left:0;
background:grey; /* just to identify area */
}
#header
{
height:42px;
background:green; /* just to identify area */
}
#footer
{
width:100%; max-width:100%;
position:absolute; z-index:2;
bottom:0; left:0;
height:28px;
background:blue; /* just to identify area */
}
#test
{
width:100%; max-width:100%;
position:absolute; z-index:2;
bottom:28px; left:0;
background:white; /* just to identify area */
}
#flexible_height
{
position:absolute; top:42px; left:0;
z-index:2;
width:100%;
}
.button
{
width:100px; padding:10px 0; text-align:center; display:block;
background: red; /* just to identify button */
}

The button should be positioned in the center of the grey area (container) horizontally and vertically but also remain there when the resolution changes and the white area (test) changes the height (which is not fixed). I just can't figure out how to keep that button between the header and the test div even if the width and the height of the viewport changes (yes, it's a layout for a mobile website) ... I assume there should be a way to do it, probably with javascript, but i don't know how to do it ... Any help would be appreciated!

PS: I can't modify the html structure in any way. i can only move the button around, in and out of divs.

EDIT: I created a new div - #flexible_height. Now that the button is inside that div I can use position:absolute; top:0; left:0; right:0; bottom:0 on it ONLY IF somehow I calculate the dynamic height of the div. I am new to javascript and haven't figured out a way to do it. Any ideas? Thanks!


Hm. It's not easy.

You can sent style to button:

button {
  display: block;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-top: /* size of top container*/;
}

And when someone change window size, or rotate screen, you can use:

window.onresize = function() {
    var container = document.querySelector('#container');
    var test = document.querySelector('#test');
    var newwidth = container.offsetWidth-test.offsetWidth;
    var button = document.querySelector('.button');
    button.style.marginTop = newwidth;
}

(It's just sample of code and point, so edit it for your case, of course)