使用html/css的页脚格式和间距问题

我已经通过了一个相当过时的网站，说实话是有点混乱。所以目前我基本上只是想做一些基本的挑战！问题使用html/css的页脚格式和间距问题

网页是这里http://www.yourchesham.co.uk/online.htm

我试图下添加

Previous Editions

部分杂志的历史版本，但我似乎不能够移动的底部内容放在页面上，这意味着加班的文本将开始重叠。

我试过简单地使用<br><br>来推动页面内容，但这是行不通的。主要代码块如下所示。不知道如何解决这个问题？

 <div id="apDiv19"> 
      <div align="center" class="style21"> 
       <h4>Support the Businesses <br /> 
        that support <span class="style17">yourAmersham</span></h4> 
       </div> 
      </div> 
      <div id="apDiv22">Registered in 'England and Wales' Company number 08280869</div> 
      <div id="apDiv23"> 
       <h4>Our Latest Edition</h4> 
       <div style="text-align:center;"><div style="margin:8px 0px 4px;"><a href="http://www.calameo.com/books/0052756020d65a0443ab5" target="_blank">Your Amersham Issue 51 October 2017</a></div><iframe src="//v.calameo.com/?bkcode=0052756020d65a0443ab5&mode=mini" width="480" height="300" frameborder="0" scrolling="no" allowtransparency allowfullscreen style="margin:0 auto;"></iframe><div style="margin:4px 0px 8px;"><a href="http://www.calameo.com/" target="_blank">Read more publications on Calaméo</a></div></div> 

       <h4>Previous Editions</h4> 
       <a href="http://en.calameo.com/read/00527560211169822a565" target="_blank">September Issue</a><br> 
       <a href="" target="_blank">August Issue</a> 
       <br> <br> 

       <!--  <div style="background-color: #333333; width: 524px"> --> 

    </div>

来源

2017-09-25 Dano007

的问题不仅仅在于该分区，它实际上几乎所有的人:)

所有的div都被赋予了一定的高度和绝对定位。这意味着他们不会移动或增长（尽管内容会像您看到的那样溢出）。

为了使布局与内容一起移动和增长，您需要更改从绝对定位到相对定位的所有内容。

或者，如果你可以在该页面只针对CSS，你可以只更新底部的div的绝对位置它们移到你的新内容

变化#apDiv14高度的方式（那就是，在最新的版本，假设这是您要添加的以前的版本到一个）height:auto;
手动更改以下的div的top值，以满足您添加了新的内容：#apDiv7，#apDiv9，apDiv10， apDiv18，apDiv19（可能还有其他！）

这很麻烦，但网站本身也是如此！ :)

来源

2017-09-25 17:13:55 FluffyKitten

谢谢，很好的答案！ – Dano007

很高兴能帮到你！如果你有权访问HTML模板（如果有的话）！），并且你对CSS比较舒服，我建议将所有的页脚div放到一个容器中 - 然后你只需要定位它，虽然它需要改变CSS以将div放在该容器中。然后，您可以将其绝对地定位在页面底部，并将其高度作为填充添加到页面底部以腾出空间。然后，如果你的内容div使用'height：auto'，那么页脚应该始终保持不变！ – FluffyKitten

使用html/css的页脚格式和间距问题

回答

相关问题