28111 sujets

CSS et mise en forme, CSS3

Etendre le background d'un div (content) jusqu'au footer

Bonjour,

pour illustrer ma demande d'aide:
upload/831-forced-botto.jpg

Le footer est fixé au bas de la fenêtre lorsque le contenu est trop court et il suit le contenu ( ne reste donc pas fixe) lorsque celui-ci devient plus long. ( c'est le rôle du .container dans le code).
Mon problème ( cf l'image) c'est quand le contenu est trop court, le div du contenu ne s'etend pas jusqu'au footer ( espace blanc entre le footer le contenu).
Je souhaiterai que le fond jaune aille jusqu'au footer.


<body role="document">
	<div class="container">	
		<header class="mainHeader" role="banner">
			<div class="webSite-wrapper">
			</div>
		</header>		
		<div class="webSite-wrapper">
			<section class="mainContent">				
			</section>
		</div>		
		<footer class="mainFooter" role="contentinfo">
			<div class="webSite-wrapper">			
		</div>
		</footer> 	
	</div><!-- /.container -->
</body>



               html,
		body {
			height: 100%;			
		}
		.container {
			min-height:100%;
			position:relative;
		}
		.webSite-wrapper {
			margin: 0 auto;
			max-width: 1200px;
			max-width: 75rem; 
			width: 84%;
		}
              .mainContent {			
			padding-bottom:60px;
		}
		footer {
			position:absolute;
			bottom:0;	
			height:60px;		
			width: 100%;
		}


Cordialement
Modifié par cpalo (31 Jan 2015 - 16:17)
Stéphanie W. a écrit :
Bonjour,
Tu as regardé sur ce tuto http://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html ?

Bonjour

Justement, je ne comprends pas très bien comment appliquer ce tuto à la page suivante: http://polyphonies.idf.free.fr/
La structure est relativement simple:

<body onload="resize();">
        <header>
            <img id="logo" src="/images/Logo.png" alt="logo" onclick="document.location = '/';"/>
            <div style="tex-align:center;color:red;font-size:1.2em;font-weight:bold;">Site en cours de construction</div>
        </header>
        <nav> <!-- futur menu à développer -->
            <div id="menubox">
                <div class="menu">Présentation</div>
                <div class="menu">menu2</div>
                <div class="menu">menu3</div>
                <div class="menu">menu4</div>
                <div class="menu">Notre site</div>
            </div>
        </nav>
        <section id="container">
            <iframe id="content" src="http://polyphonies.idf.free.fr/html/accueil.php"> </iframe>
        </section>
    </body>

avec le CSS:

            html {height:100%;width:100%;}
            body {height:100%;width:100%;margin:0;padding:0;
                font-family:"Myriad Pro", "Trebuchet MS", Arial, Geneva, sans-serif;background:white;}
            header {width:100%;height;100px;text-align:center;}
            nav {position:relative;}
            #logo{cursor:pointer;}
            #menubox{position:absolute;text-align:center;width:100%;}
            .menu{display:inline-block;text-align:center;white-space: nowrap;padding:4px 10px;}
            #container {}
            #content {display:block;width:90%;margin:50px auto 0;min-height:500px;}

et Javascript

            function resizeAction() {
                    var body = document.getElementsByTagName('body')[0], bodyRect = new Rectangle(body);
                    var content = $('content'), contentRect = new Rectangle(content);
                    var src = content.src;
                    content.src = 'about:blank';
                    content.style.height = (bodyRect.height - contentRect.top - 20) + 'px';
                    if(src == '') src = '/html/accueil.php';
                    content.src = src;
                }

Rectangle est une classe d'objet définie dans ma boîte à outils JS qui donne les intos de positionnement d'un élément: top, left, width, height, bottom, right en px
L'appel à la fonction "resizeAction()" lors du chargement de la page a uniquement pour but de calculer la hauteur de #content. Elle est également appelée par l'évènement "resize", avec une tempo pour éviter les cascades d'événements.
Quelqu'un pourrait il me dire comment avoir une iframe dont la hauteur prenne la taille désirée (du point courant au bas de la page - 20px) sans passer par cette bidouille?
@stepanie
oui j'avais déjà été voir mais le lien ci-dessous n'est plus valable:
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.htm

Et j'ai bien l'effet voulu sur le footer.

Mais mon problème c'est de vouloir que le background du contenu s'étende jusqu'au footer.. Je vais regarder du côté de l'astuce de trois colonnes de la même hauteur. J'espérais qu'il pouvait y avoir une solution relativement simple et propre en css.

Bonne fin de we
Modifié par cpalo (01 Feb 2015 - 15:26)
@cpalo En fait le souci est toujours le même, ton site à la hauteur de body, si body est pas assez haut, il faut y aller à grand coup de min-height:100% et height:100% sur tous les éléments parents comme dans le tuto de Raph.
Sinon effectivement comme dit gc-nomade il y a la mise en page en tableaux CSS, flexbox (http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/) ou encore utiliser des unités de viewport (100vh).

Par contre je comprends pas pourquoi le footer est en positionnement absolute ? Parce que ça va te poser des soucis de superpositions quand y aura assez de contenu sur body (ou quand le navigateur sera pas super haut).
@PapyJP il n'y a pas de footer sur ton site du coup je suis pas sure de comprendre où tu veux appliquer le tuto, peut-être serait-il plus simple d'ouvrir ton propre sujet sur le forum ? Smiley smile
Stéphanie W. a écrit :
@PapyJP il n'y a pas de footer sur ton site du coup je suis pas sure de comprendre où tu veux appliquer le tuto, peut-être serait-il plus simple d'ouvrir ton propre sujet sur le forum ? Smiley smile

@stéphanieW:
Le tuto parle essentiellement de gérer l'écran comme une page, en utilisant height:100%
Que je mette ou pas un footer (j'ai effectivement l'intention d'en mettre un dans la page définitive) cela ne me dit rien de la façon d'ajuster la taille de mon iframe pour qu'il reste de place (pour le footer éventuellement) au dessous, autrement qu'en bidouillant en JS.
Compte tenu de la taille de mon post, je suis un peu réticent à le recopier dans un nouveau fil.
Si tu penses que c'est utile, je crois qu'en tant que grande prêtresse du forum tu peux le faire en quelques clics?
Juste comme ça en passant…
PapyJP a écrit :
Compte tenu de la taille de mon post, je suis un peu réticent à le recopier dans un nouveau fil.

Bouton "éditer le post" > clic dans la zone de texte > cmd+A > cmd+C > Ouverture d'un nouveau fil > cmd+V Smiley murf

Hop, je ne suis déjà plus là Smiley biggol
audrasjb a écrit :
Juste comme ça en passant…

Bouton "éditer le post" &gt; clic dans la zone de texte &gt; cmd+A &gt; cmd+C &gt; Ouverture d'un nouveau fil &gt; cmd+V Smiley murf

Hop, je ne suis déjà plus là Smiley biggol

Ok je me lance! Smiley biggrin
...sauf qu'avec un iPad on n'a pas de touche Ctrl !
@stephanie
Ce positionnement absolu permet au footer de rester au bas du div"container" et ainsi quand il y a beaucoup de contenu, le footer n'est plus visible ( puisqu'en bas de la page) et ne réapparaît qu'avec le scroll.
@gc-nomade
La solution flex-box me tente bien.
Je n'avais pas encore pris le temps de lire en détail l'article de raphael sur ce sujet ni les liens vers les autres articles. C'est très séduisant ...
A voir comment je pourrai l'intégrer mais cela ne doit pas être trop difficile car j'utilisais des block-groups ( main-content) contenant des blocks (content, sidebar) avec des tailles en pourcentage, et non pas une grille avec des colonnes.
Sujet clos
Aller à