I have a web-page that displays multiple areas who's heights aren't know until their contents that comes from a database are place their respective areas and the web-page rendered. In this web-page there is a parent div that displays background images using three css url, one for a top cap, a middle repeating image, and a bottom cap, with the idea that no matter the overall height of the parent div, these images will fill out the whole area of the parent div. These images should not be stretched or they won't look right.
All three images show, but the middle image doesn't repeat enough to fill out the area behind all of the child elements of the parent div. However, using Chrome's inspect element panel and focusing on the parent div, I can see that the div's clientHeight attribute is 0, but then, if I manually increase the parent div's height style, I can manually set this height so that the background completely fills out the area the way I want.
Again, I don't want to set the parent's height style to a particular value, because the child divs contain different amounts of text depending on the information that the page is supposed to be showing.
Unfortunately, this demonstration doesn't exhibit this initial clientHeight problem.
Even though I'm unable to reproduce the initial height problem, I still would appreciate comments on how to make sure that the the parent div's height is properly set, and the background properly extends behind all of the child divs.
My thought is that this has to be done in javascript, after the page is rendered, so I've written the below function, Here, instead of a background-image, I'm using a yellow background color to show the height of the parent div.
//
// Update the context_text_long class div's
// height to include the sum of the heights
// of all child divs when each div has a
// clientHeight.
//
//
// To prevent closure issues, create these
// global variables to used by the following
// function.
//
var $content_text_long,
content_text_long,
content_text_long_height,
divs, divs_count, divs_index,
total_height, counter;
//
// Use the jQuery ready function so that the code runs after the
// page is loaded and rendered...
//
$( function() {
var handle;
content_text_long =
( $content_text_long = $( '.content-text-long' ) )
.get( 0 );
initial_height =
total_height = $content_text_long.height();
divs = content_text_long.querySelectorAll( 'div' );
divs_count = divs.length;
divs_index = 0;
counter = 0;
//
// The window.setInterval loops with a
// fifth of a second delay until each
// div has a clientHeight and it has
// been added to the content_text_long
// height.
//
// alert( 'before' );
// debugger;
handle =
window.setInterval(
function() {
//
// total_height is the cumulative
// clientHeight of all of the divs
// and the content_text_long div's
// clientHeight, which it is
// initially set, but if the
// content_text_long div's
// clientHeight is initially 0,
// then get clientHeight until it
// has a non-zero value.
//
var value = ( ( !total_height )
? ( total_height = $content_text_long
.height() )
: total_height );
//
// The divs, including the
// content_text_long div, don't
// seem to get their clientHeight
// immediately after the page has
// loaded and is ready, so use the
// counter test to stop trying
// to get their clientHeight
// values in case they never load
// and create an endless loop.
// This mainly happens if there
// actually no data for the area,
// but with good data this should
// not happen in production.
//
if( counter++ > 100 )
if( confirm('keep trying?') ) {
// OK
counter = 0;
}
else {
// Cancel
value = false;
clearInterval( handle );
} // End of if(confirm(...)) ...
// else ...
// End of if(counter++ > 100) ...
//
// Only process the divs when they
// have clientHeights.
//
// When a div doesn't yet have a
// clientHeight, don't enter this
// while loop, instead exit this
// interval loop and try the same
// div the next time this function
// executes.
//
while( value &&
( value = divs[ divs_index ].clientHeight ) ) {
//
// This loop, allows all of the
// consecutive divs that have
// clientHeight per interval to
// be summed up and added to
// with the content_text_long
// div's clientHeight, and that
// assigned to the
// content_text_long class div's
// height style.
//
// This way the overall interval
// delay duration is minimized.
//
total_height += value;
content_text_long.style.height =
total_height + 'px';
//
// Advance to the next div and
// check that the index is
// beyond the range of divs ...
// Stop the interval looping
// when done.
//
if( ++divs_index >= divs_count ) {
clearInterval( handle );
alert( 'done' );
break;
}
} // End of while( ... ) ...
},
200 );
} );
.content-text-long {
background-color: yellow;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-text-long">
<div class="profile">
Read-Only value of an indeterminate length
</div>
<!--
//
// In the real code the value displayed in
// textarea, below, is checked and this
// element structure is not injected by the
// server-side code when the value is
// empty.
//
-->
<div class="title">
<textarea>
Read-Only value of an indeterminate length
</textarea>
</div><!-- close artist-title class div -->
<!--
//
// The value displayed by the inner div is
// checked and this element structure isn't
// injected when empty.
//
-->
<div class="members">
<h2>Members</h2>
<div>
Read-Only Value of an indeterminate length
</div>
</div><!-- close members Members div -->
<!--
//
// More element structures similar to those
// shown above follow in the real code.
//
-->
</div><!-- Close content-text-long class div -->
question from:
https://stackoverflow.com/questions/66056559/is-there-a-better-way-to-extend-the-height-of-a-div-to-include-all-of-its-child 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
