重叠背景直到一个元素

Question

我尝试将我的背景与卡片的开头重叠（就像在 stackblitz 上一样，但很干净）。我的目标是它恰好停在卡片的标题下。我试着用页面大小的百分比来做，但它不干净而且效果不是很好（大小随响应式设计、缩放等而变化）。我也尝试计算高度但它很快变得复杂（标题在 child 的 child 的 child 中）我正在寻找其他解决方案，您有什么想法吗？

我在找什么：

Stackblitz : https://stackblitz.com/edit/angular-sjgvvx

什么

Answer 1

我会分两部分。说 header 和 section。 header 获取背景和 padding-bottom。卡片位于部分容器中，并得到 NEGATIVE margin-top 等于卡片填充 + 文本高度。

通过这种方式，您可以向 header 添加任意数量的内容，并且它总是会将其他内容压低。

body {
  margin:0;
  padding:0;
  font-family: Arial, Helvetica;
  background-color: blue;
}
header {
  background-color: red;
  color: white;
  margin: 0;
  padding: 10px 10px 50px 10px;
}

.tiles {
  /* this is the important part. Make sure top margin = top padding + height of text */
  margin: -25px 10px 0 10px;
  display:flex;
  justify-content: space-between;
}

.tile {
  flex-basis: 25%;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  min-height: 100px;
}

<header>
  <h2>Some Header Content</h2>
</header>
<section>
<div class="tiles">
  <div class="tile">Tile Content</div>
  <div class="tile">Tile Content</div>
  <div class="tile">Tile Content</div>
</div>
</section>

Answer 2

不是最优但可行，一种 hackkey 方法是使用 header 中的 pseuo-Element 应用背景，因此 它正好停在标题下卡片.

.container {
    padding: 50px 50px;
    overflow: hidden;
}

.container>div {
    background: lime;
    display: flex;
    flex-wrap: wrap;
}

.container>div>.card {
    flex: 1 0 40%;
    margin: 15px;
    background: pink;
}



/* Solution */
.card>h1 {
    position: relative;
}

.card>h1:before {
    content: '';
    position: absolute;
    background: red;
    
    /* huge numbers to ensure that it fits if screen is too large */
    width: 10000px;
    height: 10000px;
    left: -1000px;
    bottom: 0;
    z-index: -1;
}

<div class="container">
    <h1>title-page</h1>
    <span>Subtitle</span>
    <div>
        <div class="card">
            <h1>Title card</h1>
            <p>babfkds sbdf ksdbfl bdslkfb kdsbflk</p>
        </div>
        <div class="card">
            <p>example2 works!</p>
        </div>
        <div class="card">
            <p>example3 works!</p>
        </div>
    </div>
</div>

重叠背景直到一个元素

Overlap background until an element

html

css

angular

angular-flex-layout