8

我有一个带有粘性页脚的网站，我想在我的 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;
}
4

5 回答 5

12

您可能会看到边距折叠的结果。

您可以通过在块元素的顶部添加边框或一些填充，或者通过设置创建新的块格式化上下文来防止边距折叠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。

于 2013-06-20T17:09:09.530 回答
0

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

你的布局不会改变。

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

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

于 2013-06-20T17:08:30.973 回答
0

尝试使用该 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 中，您可以添加您的背景图像，并且该位置将保持顶部位置。

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

我做了一个例子。

于 2013-06-20T17:38:23.637 回答
0

看起来您的 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 示例

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

overflow:auto;

更新

于 2013-06-20T17:32:57.563 回答
0

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

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

[更新]

#content {
    border-top: 0px;
    border-left: auto;
    border-right auto;
}
于 2013-06-20T17:24:12.513 回答