[CSS] Content auf 100% Höhe strecken

L.B. · 19. August 2012

Hallo Zusammen,

ich habe mal wieder ein Problemchen mit meiner Webseite (s. Signatur), und zwar möchte ich den Hintergrund der Content-Spalte von oben bis unten weiß einfärben, sodass die Seite weniger "zerstückelt" aussieht und man eine weiße Hauptspalte hat.

Ich kann zwar ohne Probleme den div-Container #content mit den entsprechenden Eigenschaften versehen und es wird auch der Hintergrund vom Header bis zum Footer eingefärbt, sobald man aber eine Seite hat, auf der der Content weniger Platz einnimmt als die Sidebar (z.B. auf der Seite für leere Suchergebnisse), reicht der #content nicht bis zur Oberkante des Footers, entsprechend endet auch der Hintergrund an dieser Stelle.

Mir ist natürlich bewusst, dass ich im Normalfall über min-height: 100% die Höhe des Contents auf die volle Höhe strecken kann, sofern alle Elternelemente den Wert height: 100% besitzen. Allerdings habe ich auf diese Weise schon den Footer an der Unterseite des Viewports "befestigt", sodass ich nicht allen Elternelementen die Höhe von 100% zuweisen kann.

Auf Möglichkeiten wie ein Hintergrundbild kann ich auch nicht zurückgreifen, da man noch die Möglichkeit haben soll, über das Adminpanel einen anderen Hintergrund festzulegen.

Die grobe Struktur sieht dabei in etwa so aus:

HTML:

<body>
    <div id="wrapper">
        <div id="main">
            <div id="content"> <!-- dieser div soll den Hintergrund bekommen -->

                <!-- Artikel -->

            </div>
        </div>
    </div>
<body>

Ich teste diesbezüglich schon seit geraumer Zeit per "Try and Error" (

) rum, aber bisher habe ich kein brauchbares Ergebnis erzielt.

Hat jemand eine Idee, wie man den gewünschten Effekt erzielen könnte? Am liebsten natürlich mit CSS. Zusätzliche Divs kann ich auch noch ohne Probleme hinzufügen.

Danke schonmal
L.B.

HellbillyDeluxe · 19. August 2012

Leider hast du nur sehr wenig Code und Infos zum CSS angeben, aber deiner Beschreibung nach zu urteilen hast du mehrere Inhaltsspalten, die alle die gleiche Höhe haben sollen, damit der Hintergrund der Content-Spalte einheitlich gefärbt ist. Lies dir das mal durch:

http://www.alistapart.com/articles/holygrail

Alternativ könntest du natürlich auch dem Wrapper einen weißen Hintergrund geben und den anderen Spalten (z.B. Header und Sidebar) einfach einen anderen Hintergrund verpassen. Dann sollte der eigentliche Inhalt so oder so immer einen weißen Hintergrund besitzen.

L.B. · 19. August 2012

Danke schonmal für deinen Tipp.

Ich lese mir das mal durch.
Mit mehr Code kann ich übrigens dienen.

Exemplarisch für das HTML Markup habe ich mal die die index.php genommen.

PHP:

<?php 
/*
*	index.php
*
*	LB-Projects Theme
*	Autor: Lukas Bommes
*	Copyright (C) Lukas Bommes
*/ 
?>

<?php get_header(); ?>

	<?php LB_announce_widget(); ?>

	<div id="article-wrapper">
                
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		
			<div class="article">
					
				<?php LB_article_title('cat'); ?>
						
				<div class="entry">
				
					<?php LB_thumbnail('cat'); ?>

					<?php the_content( __('read more', 'lbprojects') ); ?>

				</div>

				<?php if( has_post_format('quote') ) : ?>
					<div class="cite"><?php the_title(); ?></div>
				<?php endif; ?>
					 
			</div><!-- article -->

		</div><!-- post -->
                    
		<?php endwhile; endif; ?>

	</div><!-- article-wrapper -->
	
	<?php LB_pagination(); ?>	

	<?php comments_template(); ?> 

	</div><!-- content -->
                                
	<?php get_sidebar(); ?> 
                               
	</div><!-- main -->

</div><!-- wrapper -->

<?php get_footer(); ?>

Die für das Layout relevanten CSS-Eigenschaften:

Code:

html {
	margin: 0;
	padding: 0;
	min-width: 1090px;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	min-width: 1090px;
	height: 100%;
}

#header {
	position: absolute;
	width: 100%;
	min-width: 1090px;
	height: 50px;
}

#header-wrapper {
	width: 1000px;
	height: 50px;
	margin: 0 auto;
	padding: 0 15px 0 75px;
}
 
#wrapper {    
	position: relative;
	width: 1000px;
	min-height: 100%;
	margin: 0 auto;
	padding: 0 15px 0 75px;
}

#main {
	width: 100%;
	padding: 0 0 223px 0;
	margin: 0;
}

#content,
#content-fullwidth {
	width: 720px;
	font-size: 12px;
	float: left;
	padding: 100px 0 30px 0;
}

#content-fullwidth {  
	width: 1000px;
}

#sidebar {  
	padding: 100px 0 35px 0;   
	width: 260px; 
	float: right;
}


/* Footer */

#footer {
	clear: both;
	margin-top: -223px;
	min-width: 1090px;
	min-height: 200px;
}

#footer-wrapper {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	padding: 0 15px 0 75px;
}

#footer-wrapper {
	padding-top: 20px;
	padding-bottom: 30px;
}

Ergänzung (19. August 2012)

@HellbillyDeluxe: Ok, danke nochmal. Mit der Anleitung hat es geklappt.

Ich habe dem Content jetzt ein padding-bottom von 200000 Pixeln und ein margin-bottom von ebenfalls 200000 Pixeln gegeben. Der Messi, der mein Theme verwendet und es schafft, seine Sidebar über 200000 Pixel lang werden zu lassen, ist dann selbst schuld.

Suche

[CSS] Content auf 100% Höhe strecken

L.B.

Ensign

HellbillyDeluxe

Gast

L.B.

Ensign

Ähnliche Themen