Question

我有一个粘性页脚的网站，我希望在我的contentContainer顶部有一个背景图片。有一个边框很好，但如果我从内容“薄蓝色固体”删除边框整个事情被推下来，我的背景图像不再在顶部......

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

Answer 1

您可能会看到折边利润的结果。

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

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

使用哪个选项

如果使用前两个选项，则可以通过边框宽度或填充为块元素的顶部添加额外的1px高度。

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

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

至于overflow，除了一些小的例外，它一直受到IE4的广泛支持。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/overflow。

Answer 2

我认为您可以使用box-shadow属性而不是border属性。

您的布局不会改变。

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

subyacente的想法是阴影就像一个边界。

Answer 3

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

我认为你使用margin：auto来提供水平居中。你可能想把它分解为个人方面（在这里使用长手）：

[增订]

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

Answer 4

看起来你的h2正在推动容器。我只是删除contentContain因为不确定你为什么需要它？将背景放在内容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 example

UPDATE 正如Marc Audet指出的那样，只需添加

overflow:auto;

Update

Answer 5

尝试使用该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。

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

5 个答案: