Css 为什么从div中删除边框会破坏我的布局？

我有一个带有粘性页脚的站点，我希望在contentContainer的顶部有一个背景图像。有边框很好，但如果我从“淡蓝色实体”内容中删除边框，整个内容都会被向下推，我的背景图像不再位于顶部

<div id="mainContain">
    <div id="header"></div>     
    <div id="contentContain">
        <div id="content">
            <h2>Hog</h2>
        </div>  
    </div>
    <div id="footer"></div>
</div>

---

我认为可以使用框阴影属性而不是边框属性

你的布局不会改变

box-shadow: 0 0 1px 2px navy; /*For example*/

---

subyacente的想法是阴影的工作原理类似于边框。

您可能看到了边缘塌陷的结果

您可以通过在块元素的顶部添加边框或某些填充，或通过设置

溢出：auto

，创建新的块格式上下文来防止页边距塌陷，例如：

#content {
    margin: auto;
    border: thin transparent solid; /* option 1 */
    padding-top: 1px; /* option 2 */
    overflow: auto; /* option 3 */
}  

使用哪个选项

如果使用前两个选项，则将根据边框宽度或填充向块元素顶部额外添加1倍的高度

使用

溢出

的第三个选项不会影响元素的高度

前两个选项可能向后兼容所有浏览器，但最原始的浏览器除外。任何支持CSS2.1的东西都将按预期工作

至于

溢出

，它在IE4中一直得到广泛支持，只有少数例外。

---

有关详细信息，请参阅。

我认为问题的原因在于您有一个边界规则来管理box对象“#content”的边界部分。删除规则后，它将恢复为默认值

我认为您使用了margin:auto来提供水平居中。您可能希望将其分解到各个方面（此处使用长手）：

[更新]

#content {
    border-top: 0px;
    border-left: auto;
    border-right auto;
}

---

看起来你的h2正在向下推动容器。我只是删除contentContain，因为不确定您为什么需要它？一旦将背景放置在contentdiv中，就可以正常工作了

HTML:

更新 正如Marc Audet指出的，只需添加

overflow:auto;

---

尝试使用该HTML结构：

<div id="mainContain"><div id="header"></div>    
<div id="contentContain">
    <div id="backTop"></div>
    <div id="content">
        <h2>Hog</h2>
        <h2>Hog</h2>
        <h2>Hog</h2>
    </div>
</div>
<div id="footer">YAY</div>

猪
猪
猪
耶

在带后盖的DIV中，您可以添加背景图像，该位置将保持顶部位置

在css文件中，输入背景图像的代码，完成后，背景始终位于顶部

---

我发了一封邮件。

听起来像是保证金崩溃。谢谢你的帮助，每个选项都解决了问题！我想知道哪个选项更可取，因为它们都可以工作，但是一个选项比另一个更可能在旧浏览器中工作吗？再次感谢…请在回答中查看其他评论。祝你一切顺利！

html, body {
 padding: 0;
 margin: 0;
 height: 100%;
}

#mainContain {
 min-height: 100%;
 position:relative;
}

#header {
 width: 100%;
 height: 180px;
 background-color: #111111;
}

/* #contentContain {
 background: url('http://baconmockup.com/400/300') no-repeat center 0;
 padding-bottom: 45px;   This value is the height of your footer
} */

#content {
 margin: auto;
 /* border: thin solid blue; */
 background: url('http://baconmockup.com/400/300') no-repeat center 0;
 padding-bottom: 45px;   /* This value is the height of your footer */
}

#footer {
  position: absolute;
  Width: 100%;
  bottom: 0;
  height: 45px;  /* This value is the height of your footer */
  background-color: #111111;
}

overflow:auto;

<div id="mainContain"><div id="header"></div>    
<div id="contentContain">
    <div id="backTop"></div>
    <div id="content">
        <h2>Hog</h2>
        <h2>Hog</h2>
        <h2>Hog</h2>
    </div>
</div>
<div id="footer">YAY</div>