Раскрасьте все, что находится за пределами div, но внутри другого div, другим цветом

Question

Я смоделировал страницу A4 в div с белым фоном, и если пользователь напишет более одной страницы A4, он должен расширить страницу, но все, что ниже, должно иметь красный фон. Поэтому вместо перехода на следующую страницу он должен информировать пользователя о том, что они превышают лимит, как показано на рисунке ниже:

.card-a4 {
  min-height: 297mm;
  width: 210mm;
  background-color: red;
  box-shadow: 0px 0px 10px 1px #eee;
}

.card-a4-fixed {
  position: absolute;
  top: 0;
  left: 0;
  height: 297mm;
  width: 210mm;
  background-color: white;
  box-shadow: 0px 0px 10px 1px #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-a4">
  <div class="card-a4-fixed">
    Text
  </div>
</div>

Я пробовал играть с :: after, а не с div внутри div, но тоже не смог его решить, думаю, это будет лучше чтобы решить это. Кроме того, под ним могут быть страницы, поэтому я не могу использовать абсолютное позиционирование только для этой страницы.

Я думаю, что это можно сделать с помощью всего CSS, иначе я использую Jquery если это можно решить с помощью javascript.

Answer 1

Используйте градиент там, где вы определяете размер:

.card-a4 {
  min-height: 100px;
  width: 200px;
  background: 
    linear-gradient(#fff,#fff) 
    top
    /100% 100px /* the 100px is the height of coloration, if the div is longer we will see the red */
    no-repeat,
    red;
  box-shadow: 0px 0px 10px 1px #eee;
}

<div class="card-a4">
    Text content goes here<br>
    Text content goes here<br>
    Text content goes here
</div>

<div class="card-a4">
    Text content goes here<br>
    Text content goes here<br>
    Text content goes here<br>
    Text content goes here<br>
    Text content goes here<br>
    Text content goes here<br>
    Text content goes here<br>
    Text content goes here<br>
    Text content goes here<br>
    Text content goes here<br>
    Text content goes here
</div>

Answer 2

Ладно, кажется, мне удалось сделать это только с html + css. Я немного поправил высоту card-a4-fixed, чтобы было нагляднее. Также извините за эти «ааааа»

.card-a4 {
min-height: 30mm;
    width: 210mm;
    background-color: red;
    box-shadow: 0px 0px 10px 1px #eee;
}
.card-a4-fixed {
  display: inline-block;
    height: 30mm;
    width: 210mm;
    background-color: white;
    box-shadow: 0px 0px 10px 1px #eee;
    max-height: 30mm;
}
body{
background:grey;
}

<div class="card-a4">
  <div class="card-a4-fixed">

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa 
more test more test

  </div>
  <br style="clear: both">
</div>
<div class="card-a4">
  <div class="card-a4-fixed">

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa

  </div>
  <br style="clear: both">
</div>

Answer 3

Вы можете использовать window.innerHeight и top css значение, чтобы увидеть, должно ли оно быть красным. Может быть примерно так:

if(element.style.top >= window.innerHeight) {
    element.style.backgroundColor = "red";
} else {
    element.style.backgroundColor = "";
}