Antworten auf deine Fragen:
Neues Thema erstellen

Bootstrap 2 Panels mit gleicher (dynamischer Höhe)

AxelM

Nicht mehr ganz neu hier

Hallo ich habe folgendes HTML Konstrukt:
Code:
<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:
Code:
$(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.
 

Squeendot

Aktives Mitglied

Servus Axel,

probiers doch mal via jQuery mit EqualHeights:
Javascript:
(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

Nicht mehr ganz neu hier

bootstrap css
colorbox css
und eine Farbanpassung.

Code:
<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

Aktives Mitglied

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 :p
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.448
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben