javascript - 如何在响应式布局中将按钮放置在没有固定高度和位置 :absolute? 的区域(更新)

Question

这是我的布局的更新 fiddle :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 */    
}

按钮应水平和垂直放置在灰色区域(容器)的中心，但当分辨率发生变化并且白色区域(测试)改变高度(不固定)时，按钮也应保持在那里。我只是不知道如何在标题和测试 div 之间保留该按钮，即使视口(viewport)的宽度和高度发生变化(是的，这是移动网站的布局)...... 我想应该有办法做到这一点，可能是用 javascript，但我不知道该怎么做...... 任何帮助将不胜感激!

PS:我不能以任何方式修改html结构。我只能将按钮移入和移出 div。

编辑:我创建了一个新的 div - #flexible_height。现在按钮在那个 div 里面，我可以使用 position:absolute;顶部:0；左:0；右:0； bottom:0 仅当我以某种方式计算出 div 的动态高度 时。我是 javascript 的新手，还没有想出办法。有任何想法吗？谢谢!

Answer 1

嗯。这并不容易。

您可以将样式发送到按钮:

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

当有人更改窗口大小或旋转屏幕时，您可以使用:

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;
}

(这只是代码示例和要点，因此当然可以根据您的情况进行编辑)