28172 sujets

CSS et mise en forme, CSS3

Bloc qui prend le reste de la hauteur de ma page

Bonsoir,

Mon problème est le suivant :

J'ai une page avec un header, un contenu et un pied de page.
Le header et le pied de page ne sont pas imbriquer dans le contenu parce qu'ils ont une largeur différente.
Mon header prend un certaine place sur ma page et j'aimerai que mon contenu prenne le reste de la place sur ma page quand il n'y a pas beaucoup de contenu et qu'il s'agrandisse quand il y en a plus que la hauteur.

J'ai déja chercher sur google ou sur le forum(faq et autres posts via la recherche), mais rien ne marche pour moi ou alors je fais mal qqch...

J'ai essayer les height:100%, les min-height:100% et autres méthode mais rien n'y fait !
J'aimerai essayer de trouver une solution qui puisse etre propre et efficace.

Assez parler, voici mon code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="Min-Ink, The digital online portfolio of Malempre Dominique" />
<title>Min-Ink Portfolio</title>
<link href="css/min-ink.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
	<div id="header">
		<img src="./img/images/header_logo.gif" alt="Min-Ink Logo" id="header_logo"/>
		<img src="./img/images/header_title.gif" alt="Graphic Design &amp; Marketing Alternatif" id="header_title"/>
		<ul id="menu">
			
		</ul>
	</div>
	<div id="sub_menu">
		<ul id="sub_link">
			
		</ul>
	</div>
	<div id="content">
		<div id="top">
			<h1>
				Home
			</h1>
		</div>
		<div id="main-content">
			<h2>
				2007 :
			</h2>
			<p>
				Contenu
			</p>
			
		</div>
		<div id="sub-content">
			<h2>
				11.03.2008 :
			</h2>
			<p>
				Contenu pour les mise a jour ou les commentaires
			</p>
		</div>
	</div>
	<div id="footer">
		<span>
			© 2008, Min-Ink, Malempré Dominique. All Rights Reserved.
		<span>
	</div>
	

</body>
</html>




html
{
	height: 100%;
}
body
{
	height: 100%;
	margin: 0;
	padding: 0;
}
/************************************ Header *********************************/
#header
{
	width: 100%;
	height: 160px;
	border: none;
}

#content
{
	width: 827px;
	height: auto;
	height: 100%;
	min-height: 69.2%; /*test pour garder la hauteur de la fenetre*/
	position: relative;
	padding: 0;
	margin:auto;
	margin-top: 25px;
}

#main-content
{
	width: 600px;
	height: 100%;
	/*min-height: 100%;*/
	float: left;
	margin-left:1px;
}

#sub-content
{
	background-image:url(../img/images/sub_content_back.gif);
	background-repeat:repeat-y;
	width: 225px;
	float: right;
	height: 100%;
	/*min-height: 100%;*/
	/*margin-right:1px;*/
}


Si vous voulez tout le code pour plus de détails, dites le moi Smiley sweatdrop .
Sujet clos
Aller à