Zwei Objekte die immer die selbe höhe haben

Thomas_Report

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/public/images/…/icon_smile.gif]

HTML

<!DOCTYPE html>
<html>
<head>


    <title>Titel und so</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<dir id="site">
   <header>Titel und so</header>
   <div id="steuerung">Steuerung</div>


   <section>
        <article><h1>fdlfsjsfdjodfjjdfjdf</h1><br />dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd"</article>
   </section>


    <aside>ASIDE</aside>


   <footer>FOOTER</footer>
</dir>


</body>
</html>

Alles anzeigen

und hier die css:

HTML

header{
    width: 900px;
    height: 200px;
    background-color: orange;
    float: left;
}






section{
    width: 700px;
    background-color: blue;
    float: left;
    word-wrap:break-word;


}


aside{
    margin-bottom: 10px;


    width: 200px;
    background-color: red;
    float: right;


}


footer{
       height: 2em;
       width: 100%;
       background-color: pink;
       clear: both;
}






#site{
    width: 900px;
      background-color: black;
      margin: auto;


}


#steuerung{
    background-color: brown;
    width: 100%;
    float: left;
}






body{
    background-color: black;
}




*{
    padding: 0px;
    margin: 0px;
}

Alles anzeigen

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

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

explanator

Warum setzt du den Code nicht hier hinein, Es gibt extra Schalter für die Code-Tags, zu finden im Editor in der zweiten Zeile rechts.
Bitte hole das nach, wenn du eine Antwort haben möchtest.

Thomas_Report

Ist gemacht

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

<script>
   $(document).ready(function() {
  var article = $('article'),
      aside = $('aside'),
      articleHeight = article.css('height');
      aside.css({
        'height':articleHeight
      });
});
 </script>

Das wird einfach direkt vor </body> gepostet

und in den <head> Bereich kommt noch.

explanator

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.

HTML

/* CSS */


*{
    margin: 0;
    padding:0;
}
html{
    background-color: black;
}
body{
    width: 900px;
    margin: 0 auto;
}
#steuerung{
    background-color: brown;
    width: 100%;
}
header{
    height: 200px;
    background-color: orange;
}
#wrapper {
    overflow:hidden;
}  
section{
    width: 700px;
    background-color: blue;
    float: left;
    word-wrap:break-word;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}
aside{
    width: 200px;
    background-color: red;
    float: left;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}
footer{
    height: 2em;
    background-color: pink;
    clear: both;
}

Alles anzeigen

HTML

<!DOCTYPE HTML>
<html lang="de">       
    <head>           
        <meta charset="UTF-8">           
        <title>   
           Titel und so     
        </title>  


</head>
<body>
    <header>
        <h1>Titel und so</h1>
    </header>


    <div id="steuerung">
        <p>Steuerung</p>
    </div>


    <div id="wrapper">
        <section>
            <article>
                <h1>fdlfsjsfdjodfjjdfjdf</h1>
                <p>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<p>
            </article>
        </section>
        <aside>
            <p>ASIDE</p>
        </aside>
    </div> 


    <footer>
        <p>FOOTER</p>
    </footer>
</body>
</html>

Alles anzeigen

Thomas_Report

Hat funktioniert vielen dank:)

djheke

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.

explanator

@djtheke
Schön wäre es gewesen, wenn du gleich dazu noch die optimale Lösung dazu geschrieben hättest. Ist ja nicht so, dass ich nicht auch gerne dazulerne.

djheke

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

HTML

<!DOCTYPE>
<html><head>
<meta charset=UTF-8">
<title>Fload/Margin-Layout </title>
<style type="text/css">


* {
 margin:0;
 padding:0;
}


#wrapper {
 width:900px;
 margin:10px auto;
 border:1px solid #000;
 background:#eee;
}


#header {
 border-bottom:1px solid #000;
 background:#aa9;
 color:#fff;
}


#left {
 width:700px;
 float:left;
} 


#right {
  margin-left:700px;
  background:#edd;
} 


#right:after {
 content:"";
 display:block;
 clear:both; 
}


#footer {
 clear:both;
 border-top:1px solid #000;
 background:#aa9;
 color:#fff;
}


h1 , p {
 padding:10px;
}
</style>
</head>


<body>
<div id="wrapper">
<div id="header">
 <h1>Homepage</h1>
</div>


<div id="left">
 <p>Linke Spalte</p>
</div>


<div id="right">
 <p>Rechte Spalte</p> 
</div>




<div id="footer">
 <p>Footer</p>
</div>
</div>




</body></html>

Alles anzeigen

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

explanator

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.

Tobse

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:

Zitat von explanator

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.

explanator

Oh, da scheint jetzt etwas falsch rüber gekommen zu sein. Meine Vorgehensweise habe ich ja oben kundgetan. Der Rest ist nur Kommentar und Gedanken, jetzt nicht falsch verstehen.