Bloc qui ne prend pas toute la hauteur de la page...

Bonjour,

J'ai quelques difficultés à trouver solution à mon problème. Il s'agit de la hauteur d'un bloc qui doit prendre toute la hauteur de la page (et non seulement de l'écran).

Voici quelques liens afin de constater le problème, là il s'agit du bloc vertical ou se trouve le logo :
Sur cette page tout va bien, le bloc prend bien toute la hauteur de la page.
Sur cette autre pagebien plus courte, on voit que le bloc s'arrête au milieu car le contenu n'est pas assez long. Donc ce n'est pas beau, vous en conviendrez

Le code CSS correspondant :

html {
	border:0;
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
}
body {
	background: url(../../images/bck.jpg) no-repeat 0 0 #c1bdbc;
	background-size: cover; 
	font-family: 'Arimo', Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 100%;
	height: 100%;	
}
#bigDiv {
    background: url("../../images/bck_px.png") repeat scroll 0 0 transparent;
    min-height: 100%;
    position: relative;
    width: 100%;
}
#bigConteneur {
    background: url("../../../../...../bck-colonne2.png") no-repeat scroll 0 0 transparent;
    display: table;
    height: 100%;
    margin: 0 auto;
    width: 960px;
}

J'ai lu des tutos par-ci par-là mais ça ne correspond pas trop à mon cas.
Comment dois-je m'y prendre pour que le bloc vertical "colonne logo" prenne toute la hauteur de la page ?

Merci
Modifié par cevichero (03 Mar 2014 - 00:24)

Bonjour,
le problème que tu viens de rencontrer est un problème que l'on rencontre très souvent pour ne pas dire tout le temps, chacun a SA solution, je vais donc te proposer la mienne.
Elle est assez simple et elle consiste à appliquer une taille minimum à ta colonne que tu as appelé .

.colonne{min-height:90%;}

il me semble que tes balises ne soient pas correctement fermées ( à vérifier, car je n'en suis pas sur).
J'espère que cette solution te conviendra.
Modifié par ELprofessor (22 Apr 2013 - 18:11)

oui effectivement plusieurs solutions existes, moi je te conseillerai de passer par jquery vu que tu l'utilise sur ta page avec un code dans le style :

jQuery('document').ready( function () {
var min_height = jQuery(window).height() - jQuery('footer').height();
if ( jQuery('#conteneur').height() < min_height ) {
jQuery('#conteneur').css({'height':+min_height+'px'});
}
});

Pour te faire un résumé simple ce script va vérifier la taille de ton contenu #conteneur et si celui ci est inférieur à la taille de ta fenêtre il va automatiquement lui ajouter un height en css correspondant à la taille de la fenêtre moins la hauteur de ton footer.
Modifié par tazzkiller (22 Apr 2013 - 19:00)

ELprofessor a écrit :
Bonjour,
le problème que tu viens de rencontrer est un problème que l'on rencontre très souvent pour ne pas dire tout le temps, chacun a SA solution, je vais donc te proposer la mienne.
Elle est assez simple et elle consiste à appliquer une taille minimum à ta colonne que tu as appelé .

.colonne{min-height:90%;}

il me semble que tes balises ne soient pas correctement fermées ( à vérifier, car je n'en suis pas sur).
J'espère que cette solution te conviendra.

Merci, mais ça ne change rien si j'applique ça à la colonne.

tazzkiller a écrit :
oui effectivement plusieurs solutions existes, moi je te conseillerai de passer par jquery vu que tu l'utilise sur ta page avec un code dans le style :

jQuery('document').ready( function () {
var min_height = jQuery(window).height() - jQuery('footer').height();
if ( jQuery('#conteneur').height() < min_height ) {
jQuery('#conteneur').css({'height':+min_height+'px'});
}
});

Pour te faire un résumé simple ce script va vérifier la taille de ton contenu #conteneur et si celui ci est inférieur à la taille de ta fenêtre il va automatiquement lui ajouter un height en css correspondant à la taille de la fenêtre moins la hauteur de ton footer.

ça a l'air de fonctionner parfaitement !
Merci Tazzkiller