是否可以相对于非父级div设置div位置，还是有更好的方法？

Question

我正在为一家乡村家居公司制作一个FAQ页面。 问题是单击后会展开以显示答案的按钮。 截至目前，我要么必须放下页脚方式，以使它永远看起来看起来很糟，否则就不要重叠，或者让它看起来也很糟。

问题是，按钮（及其显示的文本）需要在辅助背景中居中，但页脚需要跨越页面100％的宽度。 如果我将页脚设为问题div的子元素，而width=100%则仅使问题跨越div。

我希望页脚随着问题答案的扩展而向下移动，因此我需要页脚的垂直位置相对于问题div。

<div id="questions" class="auto-style22" style="position: absolute; width: 591px; height: 466px; z-index: 8; left: 395px; top: 323px">
<script type="text/javascript">
function toggleMe(a){
 //Collapse all answers
   var elements=document.getElementsByClassName("button");
   for (var i=0;i<elements.length;i+=1){
    elements[i].style.display = 'none';
   }
 //Toggle a particular answer
 var e=document.getElementById(a);
 if(!e) return true;
 if(e.style.display=="none"){
  e.style.display="block"
 }
 else{
  e.style.display="none"
 }
 return true;   
}</script>

<input type="button"  onclick="return toggleMe('para1');" value="What is Buffalo Ranch?" class="buttonClass"><br>
<div class="button" id="para1" style="display:none" >

    <br>Buffalo Ranch Rustic Home Furnishings is a locally owned and operated retail store featuring a unique collection of ranch and lodge décor, western art, fine antiques, and collectibles. We have a variety of taxidermy mounts, hair on hide leather furniture and other leather goods (bags, wallets, coasters, etc). We also carry beautiful western inspired jewelry, bedding and gifts. We have everything you need to accessorize yourself and your rustic home, except the fresh country air, that is!
</div>
<br>
<input type="button" onclick="return toggleMe('para2')" value="Where are you located?" class="buttonClass"><br>
<div class="button" id="para2" style="display:none" >
<br>
We are located at 123 Main Street in the quaint and historic little town of Nowhere.
</div>
</div>
div id="footer" style="position: relative; width: 100%; height: 125px; top: 966px; left: 0px;">
    <img class="footer" height=475 src="Graphics/Blue%20Footer.png" width="100%"></div>

显然还有很多问题，但我只列出了2个，以简化它。

编辑： http : //postimg.org/image/lvw5edn0r/这里有我的截图。 页脚从低处开始并且是静态的，但是直到打开一个问题后它才看起来正确，因为那里只有一堆空白。

Answer 1

将#questions position设为相对position ，删除height并添加min-height:200px （或任何其他值），从#footer删除top属性。 现在，如果您单击任何按钮，则页脚将自动下降。

 #questions{ min-height: 200px; margin-bottom: 10px; } #footer{ background: yellow; } 

 <div id="questions" class="auto-style22" style="position: relative; width: 591px; z-index: 8;"> <script type="text/javascript"> function toggleMe(a){ //Collapse all answers var elements=document.getElementsByClassName("button"); for (var i=0;i<elements.length;i+=1){ elements[i].style.display = 'none'; } //Toggle a particular answer var e=document.getElementById(a); if(!e) return true; if(e.style.display=="none"){ e.style.display="block" } else{ e.style.display="none" } return true; }</script> <input type="button" onclick="return toggleMe('para1');" value="What is Buffalo Ranch?" class="buttonClass"> <div class="button" id="para1" style="display:none" > <br>Buffalo Ranch Rustic Home Furnishings is a locally owned and operated retail store featuring a unique collection of ranch and lodge décor, western art, fine antiques, and collectibles. We have a variety of taxidermy mounts, hair on hide leather furniture and other leather goods (bags, wallets, coasters, etc). We also carry beautiful western inspired jewelry, bedding and gifts. We have everything you need to accessorize yourself and your rustic home, except the fresh country air, that is! </div> <br> <input type="button" onclick="return toggleMe('para2')" value="Where are you located?" class="buttonClass"> <div class="button" id="para2" style="display:none" > We are located at 123 Main Street in the quaint and historic little town of Nowhere. </div> </div> <div id="footer" style="position: relative; width: 100%; left: 0px;">FOOTER LINKS <!-- <img class="footer" height=475 src="Graphics/Blue%20Footer.png" width="100%"> --></div>