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

Question

我有一个带有粘性页脚的网站，我想在我的contentContainer顶部放置一个背景图像。带有边框是可以的，但是如果我从内容中删除边框"thin blue solid"，整个内容将被向下推，我的背景图像不再位于顶部...

<div id="mainContain">
    <div id="header"></div>     
    <div id="contentContain">
        <div id="content">
            <h2>Hog</h2>
        </div>  
    </div>
    <div id="footer"></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-image: url('../img/shadow-bg.png');
    background-position: center top;
    background-repeat: no-repeat;
    padding-bottom: 45px;   /* This value is the height of your footer */
}

#content {
    margin: auto;
    border: thin blue solid;
}

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

- user2078845

---

听起来像是边距折叠。 - cimmanon

Answer 1

你可能看到了合并边距的结果。

您可以通过为块级元素添加边框或一些顶部填充，或者通过设置overflow: auto来创建新的块格式化上下文，以防止边距合并，例如：

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

如何选择使用哪个选项

如果您使用前两个选项，由于边框或内边距的宽度，您会在块级元素顶部额外添加1像素的高度。

第三个选项使用overflow属性将不影响元素的高度。

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

至于overflow属性，它被广泛支持，即使是IE4也有一些微小的例外。详情请参见https://developer.mozilla.org/en-US/docs/Web/CSS/overflow。

- Marc Audet

---

谢谢你的帮助，每个选项都解决了问题！我在想哪个选项更好，因为它们都可以工作，但是有一个选项比另一个更可能在旧浏览器中工作吗？再次感谢... - user2078845

请查看答案中的附加评论。祝一切顺利！ - Marc Audet

Answer 2

我认为您的问题原因与边框规则有关，该规则管理了框对象“#content”的边框部分。当您删除该规则时，它将恢复到默认设置。

我猜您使用 margin: auto 进行水平居中。您可能需要拆分它到每个侧面（这里使用长格式）：

[已更新]

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

- nocturns2

Answer 3

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

HTML：

<div id="mainContain">
 <div id="header">
 </div><!-- End of header -->
 <div id="content">
  <h2>Hog</h2>
  <h2>Hog</h2>
  <h2>Hog</h2>
 </div><!-- End of content -->

 <div id="footer">
 </div><!-- End of footer -->

</div><!-- End of mainContain -->

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

jsFiddle 示例

更新 正如 Marc Audet 指出的那样，只需添加即可

overflow:auto;

更新

- BuiltInOneDay

Answer 4

尝试使用这个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>

在具有backTop的DIV中，您可以添加您的BACKGROUND-IMAGE，并且位置将保持顶部位置。

在css文件中放置背景图像的代码即可完成，您的背景始终在顶部。

我制作了一个example。

- rpasianotto

Answer 5

我认为你可以使用box-shadow属性代替border属性。

你的布局不会改变。

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

潜在的想法是阴影像边框一样工作。

- leoMestizo