Bootstrap 2 Panels mit gleicher (dynamischer Höhe)

[AxelM]

Hallo ich habe folgendes HTML Konstrukt:

<div class="row">
    <div class="col-md-3" id="colnav">
        <div class="panel panel-default" id="panelnav">
            <div class="panel-heading">
               
            </div>
            <div class="panel-body">
               
            </div>
        </div>
    </div>
    <div class="col-md-9" >
        <div class="panel panel-default" id="panelcontent">
            <div class="panel-heading">
             
            </div>
            <div class="panel-body">
               
            </div>
        </div>
    </div>
</div>

Nun möchte ich, dass beide Panels die gleiche Höhe haben.
Dazu habe ich folgenden JQuery Code entworfen:

$(document).ready(function($){
    var panelnavh = parseInt($('#panelnav').height());
    var panelcontenth = parseInt($('#panelcontent').height());
    if(panelnavh > panelcontenth)
    {
        $('#panelcontent').height(panelnavh);
    }else{
        $('#panelnav').height(panelcontenth);
    }
});

Für meinen Geschmack klappt das auch ganz gut. Sobald aber Bilder im rechten Panel ausgegeben werden (die werden mit PHP erzeugt, aber ganz normal als <img augegeben) scheinen diese über dem Panel zu liegen.
Ich bi nicht scharf darauf das problem mit jQuery zu lösen. Aber ich glaube mit Css gibts dafür keine Lösung.

Danke für eure Antworten.

 

[Enigmon]

Hallo Axel,

was hast du bisher an CSS?

LG
Thomas

 

[Squeendot]

Servus Axel,

probiers doch mal via jQuery mit EqualHeights:

Spoiler: equalheights.js

(function($) {

    $.fn.equalHeights = function() {
        var maxHeight = 0,
            $this = $(this);

        $this.each( function() {
            var height = $(this).innerHeight();

            if ( height > maxHeight ) { maxHeight = height; }
        });

        return $this.css('height', maxHeight);
    };

    // auto-initialize plugin
    $('[data-equal]').each(function(){
        var $this = $(this),
            target = $this.data('equal');
        $this.find(target).equalHeights();
    });

})(jQuery);

Hat bei mir bisher immer super funktioniert!


Lieber Gruß,

Julian

 

[AxelM]

bootstrap css
colorbox css
und eine Farbanpassung.

<script>
    $(window).load(function(){
        var panelnavh = parseInt($('#panelnav').height());
        var panelcontenth = parseInt($('#panelcontent').height());

        if(panelnavh > panelcontenth)
        {
            $('#panelcontent').height(panelnavh);
        }else{
            $('#panelnav').height(panelcontenth);
        }
    });

</script>

Das scheint das Problem zu lösen, wobei ich für jede Ziele Jquery dankbar bin, die da nicht drin ist

 

[Squeendot]

Pack die ganzen JavaScript und jQuery Dateien doch wie die CSS-Dateien in eine eigene Datei und verlinke sie im Footer...
Dann haste ne schnellere Ladezeit und außerdem ist es aufgeräumt und du musst keine einzige Zeile mehr in deinem Dokument lesen

 

[ebene11]

Wenn es nur CSS sein soll, ist Flexbox dein Freund.