CSS间距问题

我有一个大的图形，我正试图拉在我的内容后面。目前，我没有在我的内容后面拉，而是将图形放在它的下面，这在内容的底部和页脚之间留下了一个很大的间隙。参考的大图是底部的水彩鸟。内容是简历文本。请记住，简历文本是一个可扩展的手风琴链接。请帮我把这个地方封闭起来

CSS:

HTML:

内容在这里



投资组合在这里



内容在这里

                </ul>
            </div>
        </div>
    </div>
    <!--bottom graphics-->

    <div id="bottom-graphic-container"></div>
    <!--Footer-->
    <div id="footer-container">
        <div id="footer-content-container">
            <div id="footer-copy">Tiffani Hollis, Creative Professional (404)931.6057 <a href="mailto:thollis@i-make-it-pretty.com"> thollis@i-make-it-pretty.com</a></div>
            <div id="signature"><img src="images/signature.png"></div>
        </div>
    </div>

Tiffani Hollis，创意专业人士（404）931.6057

我认为有两种可能的修改可以改善视觉效果/删除空间：

更改包装器类以删除底部边距：

.wrapper {
  margin: 25px auto -50px;
  max-width: 920px;
  padding: 0;
  width: 100%;
  z-index: 1;
}

更改的行是边距行。我把-50px放在底边。您可以使用该值（使其更低或更高）来更改包装器和页脚之间的空间

您可能还希望为最后一个手风琴子级添加规则。因为他不需要额外的底部填充物来分隔他的兄弟姐妹

.st-open:last-child .st-content {
  padding-bottom: 0;
}

---

这一个目标是

.st content

div，该div将

.st open

作为父对象，但前提是具有

.st父对象的块是其父对象的最后一个子对象。因此，它只适用于手风琴的底部，将底部填充设置为0而不是100px。
我在本地复制了您的网站，并能够为您解决此问题

参考：（注意：由于@font-face的域组织规则相同，因此不会显示这些字体。）

解决方案是更改角鸟的HTML顺序，这样ID名为
#底部图形容器
的Div将包含手风琴内容（类名为
.wrapper
）

然后，对CSS进行了一些修改/配置，以允许正确操作。值得注意的是，我将页脚和角鸟Div设置为
位置：固定所以它总是粘在底部。当页脚后面有链接或恢复文本时，预期的浏览器
滚动条
将发挥作用

进一步澄清：角鸟是“后层”，手风琴是“中间层”，脚是“前层”。他们现在都在和谐地工作：-D

由于角鸟现在位于手风琴div后面，因此
bg background.jpg
被剪切到标题图像中。解决方案是将此图像转换为具有透明度的PNG。为此，我使用了开源的iFanView。我在这里也加入了PNG，或者你可以自己制作

当一切都说了，做了，你的网站将工作，因为你期望它。在IE8、Firefox和Chrome中测试，没有问题。（旁注：在IE8中，我没有测试@font-face字体）

以下是网页的屏幕截图，其中浏览器窗口调整为较小尺寸：

修改后的HTML:

<!--bottom graphics--><!-- Think of this as "bottom-back-layer" since various layers are at play here. -->
<div id="bottom-graphic-container">

    <!--Footer-->
    <div id="footer-container"><!-- Think of this as "bottom-front-layer". That said, back-layer and front-layer are also 'top' and 'bottom' too (nothing overlaps). -->
        <div id="footer-content-container">
            <div id="footer-copy">
              <!-- Removed personal info -->
            </div>
            <div id="signature"><img src="images/signature.png"></div>
        </div>
    </div>

</div> <!--Closing tag for bottom graphics-->

.wrapper{
  width: 920px;
  max-width:920px;
  margin: 0 auto;
  padding: 0;
  margin-bottom: 65px;            /* Once the last item in Accordion menu is behind Footer, margin-bottom:65px; will provide Browser main scrollbar if hidden. */
  position: relative;             /* position:relative required with z-index below. (or absolute can be used with more CSS settings */
  z-index: 1;                     /* A z-index of 1 is used since it's higher than '#bottom-graphic-container' (0 z-index) so Accordion Links are clickable */
}

#bottom-graphic-container {
  width:100%;
  height:313px;
  background-image:url(../images/bg-bottomTrans.png);    /* Use transparent PNG image. This CSS rule has color #fff removed as well. */
  background-repeat: no-repeat;
  position: fixed;
  bottom: 94px;                                          /* The height used here is the height of 'bg-footer.png' image. */
  /* border: 1px solid red;  */                          /* Use for troubleshooting since image, even when transparent, may prevent interaction with content under it. */
}

#footer-container {
  width:100%;
  height:94px;                                           
  background-image:url(../images/bg-footer.png);
  background-repeat: repeat-x;
  position: fixed;
  bottom:0;
  z-index: 10;                                           /* A z-index of 10 will allow the footer to cover the Accordion Links. */
}

#resume-container ul li{
  list-style-type:disc;
  list-style-position:inside;
  line-height:20px;
  font-size:  14px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  padding-left:20px;
  margin-right:80px;
}                                                        /* this closing '}' was missing */

修改后的带透明背景的PNG图像文件：



最终更新：由于上述JSFIDLE是解决此问题的一种方法，因此应OP的要求，这里有一种完全不同的方法

参考资料：

底部的图形和页脚是最后一个手风琴项目（简历）的一部分。注意：将底部的项目向上移动，使其更靠近顶部，将在网页底部为大型显示器留出空白（当然，最大化浏览器）。要更改距离，请按照CSS中的说明调整底部图形和页脚的CSS
bottom
属性

这就是为什么上面的第一种方法固定了它们，所以无论浏览器的高度如何，都可以获得统一的外观。注意：字体具有相同的域源策略规则，因此它们不会在JSFIDLE中呈现

要访问JSFIDLE编辑页面，请从地址栏中删除
/show/

HTML和CSS面板是您的代码。

我在CSS部分添加了注释，HTML部分的更改包括：

1。Div
id=“报头容器”
现在包含其他项目

2.其他项目包括：
class=“wrapper”
、
id=“底部图形容器”
和
id=“页脚容器”


3.在JSFIDLE中查看HTML时，看到的红色标记是由于以前的标记错误造成的。一旦您的网页组成，请访问以查看错误发生的位置。例如：您有一个未关闭的或额外的div标记，不应该在那里。
您能澄清您的问题是什么吗？另外，包括相关的网页中的代码片段（尽管链接到原文总比没有好）。（offtopic）遗憾的是，谷歌索引上的动态页面太松散了……是的，我知道，但我不在乎谷歌是否找到了它。它只是为了我需要提供给的人。我可能应该更关心它。@edward我用更多的代码更新了这篇文章。这有帮助吗？我重新编写了我的请求
<!--bottom graphics--><!-- Think of this as "bottom-back-layer" since various layers are at play here. -->
<div id="bottom-graphic-container">

    <!--Footer-->
    <div id="footer-container"><!-- Think of this as "bottom-front-layer". That said, back-layer and front-layer are also 'top' and 'bottom' too (nothing overlaps). -->
        <div id="footer-content-container">
            <div id="footer-copy">
              <!-- Removed personal info -->
            </div>
            <div id="signature"><img src="images/signature.png"></div>
        </div>
    </div>

</div> <!--Closing tag for bottom graphics-->

.wrapper{
  width: 920px;
  max-width:920px;
  margin: 0 auto;
  padding: 0;
  margin-bottom: 65px;            /* Once the last item in Accordion menu is behind Footer, margin-bottom:65px; will provide Browser main scrollbar if hidden. */
  position: relative;             /* position:relative required with z-index below. (or absolute can be used with more CSS settings */
  z-index: 1;                     /* A z-index of 1 is used since it's higher than '#bottom-graphic-container' (0 z-index) so Accordion Links are clickable */
}

#bottom-graphic-container {
  width:100%;
  height:313px;
  background-image:url(../images/bg-bottomTrans.png);    /* Use transparent PNG image. This CSS rule has color #fff removed as well. */
  background-repeat: no-repeat;
  position: fixed;
  bottom: 94px;                                          /* The height used here is the height of 'bg-footer.png' image. */
  /* border: 1px solid red;  */                          /* Use for troubleshooting since image, even when transparent, may prevent interaction with content under it. */
}

#footer-container {
  width:100%;
  height:94px;                                           
  background-image:url(../images/bg-footer.png);
  background-repeat: repeat-x;
  position: fixed;
  bottom:0;
  z-index: 10;                                           /* A z-index of 10 will allow the footer to cover the Accordion Links. */
}

#resume-container ul li{
  list-style-type:disc;
  list-style-position:inside;
  line-height:20px;
  font-size:  14px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  padding-left:20px;
  margin-right:80px;
}                                                        /* this closing '}' was missing */