Zwei Objekte die immer die selbe höhe haben

  • Guten Abend.


    Mein Problem ist das ich den Section und Aside Block nicht automatisch auf die exakt selbe höhe bekomme.
    Müsste der Section Bereich in seiner höhe nicht Variable sein wäre, das ja kein Problem aber naja so ist es halt leider nicht [Blockierte Grafik: http://www.der-webdesigner.net…es/smileys/icon_smile.gif]


    und hier die css:



    Bild: http://postimg.org/image/lwrgb6bi9/


    Das Blaue ist der Section und das Rote der Aside Bereich.

  • Ist gemacht:rolleyes:


    - - - Aktualisiert - - -


    Ok ich hab eine Lösung die über jQuery funktioniert gefunden. Falls jemand eine rein HTML/CSS Lösung noch kennt bitte posten :)
    Hier ist die Lösung.


    Code
    1. <script>
    2. $(document).ready(function() {
    3. var article = $('article'),
    4. aside = $('aside'),
    5. articleHeight = article.css('height');
    6. aside.css({
    7. 'height':articleHeight
    8. });
    9. });
    10. </script>


    Das wird einfach direkt vor </body> gepostet


    und in den <head> Bereich kommt noch.


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  • Vergiss Javascript, das kommt ganz zum Schluss. Ausserdem solltest du immer auch an die Leute denken, die Javascript ausgeschaltet haben.


    Hier ist die Variante lediglich mit CSS. Der Wrapper wurde zusätzlich eingefügt, da er notwendig ist.
    Die Breite der Seite wurde auf das Body-Element angewendet, dadurch Ersparnis eines DIV.



  • Explanator, es ist mir völlig unklar, warum du so eine Lösung anbietest(uralt). Der Nachteil der Variante ist der, dass Inhalte verloren gehen, wenn sich auf der Seite interne verweise befinden.

  • Sorry war nicht so gemeint.
    Hier ein altbekanntes Beispiel (float/margin)




    Flexbox oder display:table wären villeicht noch zwei Alternativen.

  • Ok, kenne ich. Das Problem hier besteht darin, dass die Linke Box nicht wirklich mitwächst, es wird nur durch den Hintergrund des Wrappers der Eindruck erweckt als wären es wirklich 2 Spalten. Dem ist ja nicht so.


    Wenn man es genau nimmt, gibt es hier nur eine Lösung ohne Nachteile und das wäre eine Tabelle mit 2 Zellen. Und genau das wird ja auch oft nachgebildet mit Div-Elternelement und display:table und den beiden innewohnenden Containern mit display:cell.


    Mir persönlich gefällt diese Pseudolösung irgendwie nicht, weil sie nicht ehrlich ist. Tabellenlayout ist out aber Tabellen nachbilden ist ok. Warum dann nicht gleich eine Tabelle verwenden, dann stimmt wenigstens auch das Markup dazu.


    Alle anderen Varianten haben alle irgendwie Nachteile.


    Das Optimale scheint hier wohl in Zukunft Flexbox zu sein, kommt nur ein wenig spät angesichts der seit Jahren bestehenden massiven Probleme beim Layout.

  • Auch wenns schon geklärt ist: Das ist doch ein uraltes Problem, hier noch eine Lösung: Faux Columns


    Bzgl. dem JavaScript: Korrekt, was das Layout angeht sollte kein JavaScript zum einsatz kommen. Man weiss nie, ob sie laufen und wenn ja, ob fehlerfrei (IE, wir lieben dich).


    EDIT:

    Mir persönlich gefällt diese Pseudolösung irgendwie nicht, weil sie nicht ehrlich ist.


    Nicht im Ernst, oder? Du bewegst dich im Internet, wenn hier 10% der Angaben derart präzise ehrlich sind, ist es viel. Und einem User ist es wirklich völlig sch**ssegal, ob zwei Bereiche jetzt gleich hoch sind oder nur gleich hoch aussehen.
    Und Tabellen sollten nur dann zum Einsatz kommen, wenn der Inhalt wirklich aus Tabellen besteht, mit dem Layout haben sie nichts zu tun. Das ist nicht nur semantisch idealistisch, sondern auch SEO-Technisch ein wichtiger punkt.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.


    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Einmal editiert, zuletzt von Tobse ()