父母的背景颜色匹配孩子的高度，上下边距为负答案

【问题标题】：background color of parent matching height of child with negative top and bottom margins父母的背景颜色匹配孩子的高度，上下边距为负
【发布时间】：2017-08-23 09:52:15
【问题描述】：

附件是我想要的效果的图像。我正在尝试以负边距来做到这一点。我需要子元素扩展到顶部和底部的父元素之外。问题是父元素的背景颜色与子元素的高度匹配。这是一个响应式站点，我将无法使用子元素的绝对定位，因为子元素（因此父元素）的高度是可变的。任何帮助将不胜感激

以下是我的代码...

body {
  background-color:#DBD9DB;
}

#headerImage {
  margin: 0;
}

#headerImage img {
  display: block;
  margin: 0 auto;
}

#parent {
	background-color: #fff4d7;
}

#child {
	background:none #FFF;
	margin:-46px auto -38px;
	position:relative;
	text-align:center;
	width:80%;
}

<body>
  <div id="headerImage">
    <img src="http://fpoimg.com/300x250?text=Preview" width="300" height="250" />
  </div>
  <div id="parent">
    <div id="child">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti. Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p>
    </div>
  </div>
</body>

【问题讨论】：

标签： html css margin

【解决方案1】：

body {
  background-color: #DBD9DB;
}


#parent {
  background-color: #fff4d7;
}

#parent:before,
#parent:after {
  content: " ";
  display: block;
  height: 50px;
  background-color: blue;
}

#child {
  background: none #FFF;
  position: relative;
  text-align: center;
  width: 80%;
  margin: -50px auto;
}

.parent {
  width: 100%;
  height: auto;
  margin: 0 auto 0 auto;
  background-color: #b5b5b5;
  overflow: hidden;
  position: relative;
}


img {
    width: 100%;
    height: auto;
}

.clearfix {
  overflow: auto;
  zoom: 1;
}

<body>
  <div class="parent clearfix">
    <div class="css-slideshow">
          <div id="parent">
                        <img class="clearfix" src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" />
      <div id="child">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti.
          Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p>
      </div>
    </div>
    </div>
  </div>
</body>

【讨论】：

感谢您的回复。不幸的是，我不能绝对定位标题图像，因为它也会响应；所以它，它的父包装器的高度是可变的。
@masterShake 不知道你需要什么，我为我的代码添加了一个 img
您调整后的解决方案正是我想要的。非常感谢！

【解决方案2】：

您可以在#parent id 中使用:after 和:before 伪元素来更改background-color，然后在#child 中使用负边距。

检查这个sn-p：

body {
    background-color:#DBD9DB;
}

#headerImage {
    margin: 0;
}

#headerImage img {
    display: block;
    margin: 0 auto;
}

#parent {
    background-color: #fff4d7;

}
#parent:before, #parent:after{
    content: " ";
    display: block;
    height: 50px;
    background-color: blue;
}

#child {
    background:none #FFF;
    position:relative;
    text-align:center;
    width:80%;
    margin: -50px auto;
}

<body>
  <div id="headerImage">
    <img src="http://fpoimg.com/300x250?text=Preview" width="300" height="250" />
  </div>
  <div id="parent">
    <div id="child">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti. Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p>
    </div>
  </div>
</body>

【讨论】：

非常感谢您的回复！这肯定会为底部工作。但在顶部，我需要让孩子看起来躺在图像的顶部。