fix(content): resolve height inheritance issues (#20309)

fixes #20305

core/src/components/content/content.scss

@@ -59,8 +59,12 @@
   --background: #{$background-color-step-50};
 }
 
-#scroll-content {
-  min-height: 100%;
+#background-content {
+  @include position(calc(var(--offset-top) * -1), 0px,calc(var(--offset-bottom) * -1), 0px);
+
+  position: absolute;
+
+  background: var(--background);
 }
 
 .inner-scroll {
@@ -69,7 +73,6 @@
 
   position: absolute;
 
-  background: var(--background);
   color: var(--color);
 
   box-sizing: border-box;
@@ -124,7 +127,7 @@
 }
 
 .transition-effect {
-  
+
   display: none;
   position: absolute;
 

core/src/components/content/content.tsx

@@ -320,6 +320,7 @@ export class Content implements ComponentInterface {
           '--offset-bottom': `${this.cBottom}px`,
         }}
       >
+        <div id="background-content"></div>
         <main
           class={{
             'inner-scroll': true,
@@ -330,9 +331,7 @@ export class Content implements ComponentInterface {
           ref={el => this.scrollEl = el!}
           onScroll={ev => this.onScroll(ev)}
         >
-          <div id="scroll-content">
-            <slot></slot>
-          </div>
+          <slot></slot>
         </main>
 
         {transitionShadow ? (