Sidebar genauso lang wie Content?

filament

filament

Erfahrenes Mitglied
Hey,

ich weiß das es geht, hab ich vor einigen Jahren mal gebraucht. Aber bin etwas raus aus dem Thema, da lange nicht mehr programmiert. Daher frag ich mal hier.

Ich habe ein Layout mit einem Rahmencontent, dadrin einen Header, Content und Footer. Der Content ist nochmal geteilt in Sidebar links und Inhalt. Soweit so gut. Nun hab ich aber das Problem, dass wenn mein Content länger ist als die Sidebar, dass die Sidebar nicht bis zum Footer runtergeht. Wie genau stell ich das an?

Hier mal mein Code:

HTML: 
<div class="mainwrapper">
    <div id="rahmen">
        <div id="overhead"></div> // Eine Grafik über dem Header
        <div id="header"></div> // Headergrafik
        <div id="mainnaviwrapper"> // Eine Zeile zwischen Header und Content
        </div>
        <div id="content">
            <div id="navilinks">
                <?php include("includes/navigation.php"); ?>
            </div>
            <div id="inhalte">
                Hier kommen die Texte rein.
            </div>
            <br class="clear"/>
        </div>
        <div id="footer">
            <div id="footleft">
                <h1>Überschrift Links</h1>
                <p class="footertextfirst">Links</p>
                <p class="footertext">Links</p>
                <p class="footertextlast">Links</p>
            </div>
            <div id="footright">
                <h1>Überschrift Rechts</h1>
                <p class="footertextfirst">Rechts</p>
                <p class="footertext">Rechts</p>
                <p class="footertextlast">Rechts</p>
            </div>
            <div id="footcenter">
                <h1>Überschrift Mitte</h1>
                <p class="footertextfirst">Mitte</p>
                <p class="footertext">Mitte</p>
                <p class="footertextlast">Mitte</p>
            </div>
            <br class="clear"/>
        </div>
    </div>
</div>

Mein CSS File sieht so aus:

HTML: 
#rahmen{
	width: 1020px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 80px;
	background: #e5e5e5;
	padding-top: 8px;
	padding-bottom: 1px;
	border: 1px solid #989898;
	margin-bottom: 10px;
}
#overhead{
	width: 1002px;
	margin-left: auto;
	margin-right: auto;
	border-top: 3px solid black;
	height: 1px;
	background: white;
}
#header{
	height: 100px;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	background:url(../images/head.png) no-repeat;
	border: 1px solid black;
	border-top: 1px solid #black;
}

#content{
	min-height: 400px;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2px;
	border: 1px solid #989898;
	background: #EFEFEF;	
}
#navilinks{
	height: 100%;
	min-height: 400px;
	margin-top: 0;
	width:200px;
	margin-left: 0;
	margin-right:40px;
	float:left;
	border-right: 1px solid #989898;
	background: #e5e5e5;
}
#inhalte{
	height: 100%;
	margin-top: 0;
	width:700px;
	margin-left:260px;
	margin-right:40px;
}
#inhalte h1{
	width: 700px;
	margin-top:20px;
	color: #6b6b6b;
	font:bold 16px/20px Arial, Helvetica, sans-serif;
	background: #e5e5e5;
	border-top: 1px solid #989898;
	border-left: 1px solid #989898;
	border-right: 1px solid #989898;
	border-bottom: 0;
	padding: 5px;
}
.inhaltrahmen {
	width: 700px;
	margin: 0;
	padding: 5px;
	font:normal 14px/18px Arial, Helvetica, sans-serif;
	border-top: 1px solid #989898;
	border-right: 1px solid #989898;
	border-left: 1px solid #989898;
	border-bottom: 4px solid #989898;
	
}
#mainnaviwrapper{
	height: 15px;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	background: #146db1;
	margin-top: 1px;
	padding: 5px;
	border: 1px solid #0f314b;
}
.nolink{
	display:block;
	text-decoration: none;
	padding: 5px;
	border-bottom: 1px solid #989898;
	border-top: 1px solid white;
	font:bold 16px/20px Arial, Helvetica, sans-serif;
	color: #6b6b6b;
}
#navilinks a{
	display:block;
	text-decoration: none;
	padding: 5px;
	border-bottom: 1px solid #989898;
	border-top: 1px solid white;
	font:normal 14px/18px Arial, Helvetica, sans-serif;
	color: #6b6b6b;
}
#navilinks a:hover{
	display:block;
	text-decoration: none;
	padding: 5px;
	border-bottom: 1px solid #051928;
	border-top: 1px solid #146db1;
	color: #146db1;
	background: #a9daff;
	font:normal 14px/18px Arial, Helvetica, sans-serif;
}
#footer{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 10px;
	border-left: 1px solid #989898;
	border-right: 1px solid #989898;
	border-bottom: 1px solid #989898;
	border-top: 1px solid white;
	background: #d0d0d0;
	padding-top: 20px;	
}
#footcenter{
	font:normal 10px/15px Arial, Helvetica, sans-serif;
	margin-left:340px;
	margin-right:340px;
}
#footleft{
	width:280px;
	margin-left:20px;
	margin-right:40px;
	float:left;
}
#footright{
	width:280px;
	margin-right:20px;
	margin-left:40px;
	float:right;	
}
#footright h1{
	font: 18px/28px Impact;
	padding-top:5px;
	padding-left:10px;
	margin-bottom: 15px;
	color: #6b6b6b;
}
#footleft h1{
	font: 18px/28px Impact;
	padding-top:5px;
	padding-left:10px;
	margin-bottom: 15px;
	color: #6b6b6b;
}
#footcenter h1{
	font: 18px/28px Impact;
	padding-top:5px;
	padding-left:10px;
	margin-bottom: 15px;
	color: #6b6b6b;
}
.footertext{
	font:normal 10px/15px Arial, Helvetica, sans-serif;
	border-top: 1px solid #989898;
	border-bottom: 1px solid white;
	padding: 5px;
	color: #6b6b6b;
}
.footertextfirst{
	font:normal 10px/15px Arial, Helvetica, sans-serif;
	border-bottom: 1px solid white;
	padding: 5px;
	color: #6b6b6b;
}
.footertextlast{
	font:normal 10px/15px Arial, Helvetica, sans-serif;
	border-top: 1px solid #989898;
	padding: 5px;
	color: #6b6b6b;
}
.clear{
	clear:both;
	max-height:1px;
	margin:0;
	padding:0;
	min-height:1px;
}
.clearleft{
	clear:left;
	max-height:1px;
	margin:0;
	padding:0;
	min-height:1px;
}

Jemand eine Idee was ich falsch mache?
 
Hallo,
das was du benötigst nennt man „Faux Columns-Technik“.
http://www.ohne-css.gehts-gar.net/0005.php

Das doofe daran ist natürlich das du hier eine Grafik für die Hintergrundfarbe und den Rahmen benötigst.
Eine eigentlich unnötig Grafik die geladen werden muss.

Eine andere Möglichkeit wäre das ganze per Javascript zu berechnen.
Hier ein jQuery Script:
Javascript: 
$(window).load(function(){
	var max_height = 0;
	$('.autoheight').each(function(e) {
		h = $(this).outerHeight();
		if (typeof(h) != "undefined") {
			if (h > max_height) {
				max_height = h;
			}
		}
	});
	if (max_height > 0) {
		$('.autoheight').outerHeight(max_height);
	}
});

Viele Grüße
 
Sicher? Ich habe das bei einer Webseite, die ich früher erstellt hatte auch ohne geschafft. Ich weiß nur leider nicht genau wie, da es ein Template war und ich diese nicht mehr auf dem Rechner habe. Dort war das auf jeden Fall ohne das von dir Genannte gelöst.
 
Hi,
das einzigste was mir noch einfällt ist ein verschachteltes Konstrukt welches per Display als Tabelle auftritt.
Du kannst dir auch das hier mal durchlesen. Da sollten eigentlich alle Möglichkeiten aufgelistet sein.

Grüße
 
Okay ich versuche glaube ich mal an mein damaliges Layout irgendwie zu kommen. Vielleicht hab ich das noch irgendwo rumliegen. Dann kann ich es nochmal genau analysieren, warum es damals ging und heute nicht :) Danke aber auf jeden Fall für deine Hilfe!
 
So nachdem ich mir also meine Festplatte vorgenommen habe, habe ich tatsächlich die alten Daten gefunden. Du hattest Recht. Es waren damals Grafiken, die die Sidebar dazu gebracht haben bis runter zu verlaufen. Insofern vielen herzlichen Dank für die Hilfe. Mein Problem ist damit gelöst.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück