Höhe mehrerer Elemente anpassen

[Tommy57]

Hallo,

ich habe ein Problem mit einer JavaScript Funktion, die eigentlich super funktioniert. Nur hin und wieder tut sie nicht das, was sie tun soll. Ich habe mehrere Div-Boxen nebeneinander, in die Texte geladen werden. Nun möchte ich, dass beim Laden der Seite alle Div-Boxen die gleiche Höhe haben.

<div class="textcontainer">
    <div class="wrapper">
        <div class="innerwrapper">
            ...
        </div>                            
        <a href="#" class="readmorebtn">mehr erfahren</a>                            
        <div class="clearfix"></div>
    </div>
</div>

<div class="textcontainer">
    <div class="wrapper">
        <div class="innerwrapper">
            ...
        </div>                            
        <a href="#" class="readmorebtn">mehr erfahren</a>                            
        <div class="clearfix"></div>
    </div>
</div>

<div class="textcontainer">
    <div class="wrapper">
        <div class="innerwrapper">
            ...
        </div>                            
        <a href="#" class="readmorebtn">mehr erfahren</a>                            
        <div class="clearfix"></div>
    </div>
</div>

<script type="text/javascript">  
    var innerWrappers;
    var wrappers;
    
    function adjustProjectsHeight() {
        var max = 0;
        var tmpHeight = 0;
        
        innerWrappers.each(function() {
            tmpHeight = $(this).height();
            if (tmpHeight > max) max = tmpHeight;
        });
        
        wrappers.each(function() {
            $(this).height(max);
        });
    };
    
    $(document).ready(function() {
        innerWrappers= $('.innerwrapper');
        wrappers= $('.wrapper');
        adjustWrapperHeight();
        window.onresize = adjustWrapperHeight;
    });
</script>

Ich gehe in der JavaScript Funktion und hole mir die größte Höhe der "innerwrapper". Danach setze ich die Höhe der Wrapper alle gleich dieser Höhe. Das funktioniert auch alles.

Hin und wieder (vllt alle 10-20 mal) kommt es jedoch vor, dass nach dem Laden der Seite die Boxen alle sehr klein sind, so dass der Text rausragt. Ich weiß nicht weswegen und kann den Fehler auch nicht rekonstruieren. Es passiert halt einfach hin und wieder.

Um das Problem zu umgehen, dachte ich, dass ein setTimeout in der jQuery ready-Funktion vllt helfen könnte, aber dieser wird sofort ausgeführt, ohne zu warten.
setTimeout(adjustProjectsHeight, 1000);

Hat jemand vllt eine Idee, woran das liegen könnte? Oder kann mir vllt jemand sagen, wie man das besser lösen könnte?

Ach ja, die window.onresize Funktion steht da, weil sich die Breite der Boxen an die Fensterbreite anpasst, und dadurch die Boxen bei einem Resize ihre Höhe ändern können. Das funktioniert auch wunderbar.

Gruß, Tommy