如何在响应式布局中将按钮放置在没有固定高度和位置的区域中：绝对？ （UPDATE）

Question

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!

Answer 1

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)

Answer 2

When We make a responsive site that time we use "Media Query" Like

@media only screen and (min-width: 768px) and (max-width:1024px){
  .XYZ{}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
  .XYZ{}
}
@media only screen and (min-width: 320px) and (max-width: 479px){
  .XYZ{}
}

In your case you want to button set in mobile view.

@media only screen and (min-width: 480px) and (max-width: 767px){
  .button{width:100%;}
}

@media only screen and (min-width: 320px) and (max-width: 479px){
  .button{width:100%;}
}

Answer 3

I don't know why you have used absolute position at various places. . you have made you your CSS complicated for your layout.. You should use css3 media queries or javascript But if you can't change your css you can use this tutorial for centering ..

It will help you..

http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

Answer 4

您可以为类按钮.button {margin：0 auto}添加一条CSS行，使其成为页面的中心