Перекрытие фона до элемента

Question

Я пытаюсь перекрыть свой фон с началом моих карт (как на стеке, но чисто). Моя цель - чтобы он остановился именно под названием карты. Я пытался сделать это в процентах от размера страницы, но он не чистый и не очень хорошо работает (размер меняется в зависимости от адаптивного дизайна, масштабирования, ...). Я также пытался вычислить высоту, но она очень быстро усложняется (название у ребенка ребенка). Я ищу другое решение, у вас есть какие-нибудь идеи?

Что я ' ищу:

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

Что

Answer 1

Я бы сделал два раздела. Скажите header и section. Заголовок получает фон и padding-bottom. Карты находятся в контейнере раздела и получают ОТРИЦАТЕЛЬНЫЙ margin-top, равный заполнению карты + высоте текста.

Таким образом, вы можете добавить столько, сколько хотите в заголовок, и он будет всегда pu sh другие вещи вниз.

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

Не оптимально, но выполнимо. Один из хакерских способов - применить фон с помощью псевдоэлемента из заголовка так, чтобы останавливался точно под заголовком карты .

.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>