Question

我正在为一家乡村家居用品公司的常见问题页面工作。问题是按钮，当单击时，展开以显示答案。截至目前，我要么必须将页脚向下放置，以免它看起来很糟糕，或者让它重叠，这看起来也很糟糕。

问题是，按钮（以及它们显示的文本）需要在辅助背景中居中，但页脚需要跨越页面的100％宽度。如果我让页脚成为div width=100%问题的孩子，那么它只会跨越问题div。

我希望页脚向下移动问题＆＃39;答案是扩展的，所以我需要页脚的垂直位置相对于问题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作为亲戚，删除height并添加min-height:200px（或任何其他值），从top移除#footer属性。现在，如果您点击任何按钮，页脚会自动关闭。

＆＃13;

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

＆＃13;

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

＆＃13;

是否有可能相对于非父div进行div位置或者是否有更好的方法？

1 个答案: