Partage
  • Partager sur Facebook
  • Partager sur Twitter

Une div qui descend jusqu'en bas de la page

Sujet résolu
    18 mai 2011 à 19:47:44

    Bonsoir à vous donc j'aurai besoin d'aide pour mettre une div qui s'étend jusqu'au bas de la page, voici mes sources :
    <html>
    	<head>
    		<title>Titre</title>
    		<link type="text/css" rel="stylesheet" href="css/style.css" />
    	</head>
    	<body>
    		<div id="header">
    			<a href="#"><img id="logo" src="img/logo/logo.png"/><p id="top">High Sport Community</p></a>
    			<div id="connection">
    			<ul>
    			<li>Login : <INPUT type="text" value="Login.." name="login"><br/></li>
    			<li>Mot de passe : <INPUT type="password" value="......." name="password"></li>
    			</ul>
    			</div>
    		</div>
    		<div id="menu">Lien - Lien - Lien - Lien</div>
    		<div id="global">
    			<div id="corps">
    			TEST
    			<div id="copyright">COPYRIGHT</div>
    			</div>
    		</div>
    	</body>
    </html>
    


    le css :

    body{
    font-family: "Verdana", Arial, Verdana, serif;
    color:white;
    background-color:252525;
    margin: 0;
    text-align: center; 
    }
    a
    {
    text-decoration: none;
    color: white;
    }
    p{
    font-size : 22px;
    color: white;
    }
    div#header
    {
    margin:auto;
    height:150px;
    width:950px;
    background-color:#363636;
    }
    img#logo
    {
    margin-left:50px;
    float:left;
    }
    div#menu
    {
    margin-top:10px;
    padding:2px;
    height:26px;
    text-align:center;
    background-color:#363636;
    }
    div#corps
    {
    padding-top:10px;
    margin:auto;
    margin-top:10px;
    width:950px;
    height:700px;
    background-color:#363636;
    position: relative;
    }
    div#copyright
    {
    padding-top:10px;
    height:150px;
    width:950px;
    background-color:black;
    position: absolute;
    bottom: 0;
    }
    p#top
    {
    margin-top:75px;
    float:left;
    font-size:24px;
    }
    div#connection
    {
    float:right;
    margin-top:30px;
    margin-right:30px;
    text-align:right;
    }
    ul {
    list-style-type: none;
    }
    


    Dans mon cas j'aimerai étendre la div 'corps' jusqu'en bas de la page, merci d'avance . :)

    Ps: Désolé pour le code (très) brouillon
    • Partager sur Facebook
    • Partager sur Twitter
      18 mai 2011 à 20:23:58

      Dans le css de ta div corps tu mets height: 100%; au lieu de height: 700px;

      ChickN
      • Partager sur Facebook
      • Partager sur Twitter
      CartoonMe
        18 mai 2011 à 20:50:11

        Merci ChickN pour ta réponse, ta solution me rapproche du résultat voulu mais, ce n'est pas totalement ce que je recherche, si j'applique height: 100%; la div aura pour grandeur toute la page, mais du fait qu'il y a le header juste avant ça fais header + corps du coup il y a un scroll de la hauteur du header .. :\
        • Partager sur Facebook
        • Partager sur Twitter
        Anonyme
          18 mai 2011 à 21:00:23

          Tu fais height: 100%; et margin-top: [taille de la bannière + 1]px; :)
          • Partager sur Facebook
          • Partager sur Twitter
            18 mai 2011 à 21:03:54

            Dans ce cas tu as une solution qui est de donner une valeur en pourcentage a ton header et ton corps avec en css un min-height pour les petits écrans.

            exemple
            header{
                    height: 10%;
                    min-height: 50px;
            }
            
            corps{
                    height: 90%;
                    min-height:500px;
            }
            
            • Partager sur Facebook
            • Partager sur Twitter
              18 mai 2011 à 21:13:45

              @Can : je n'ai pas très bien compris la valeur que tu veux que je mette dans le margin-top, j'ai mit margin-top:150px; mais la marge se situe entre le menu & le corps :|

              @Lobor : j'ai essayer ton code, mais je n'obtiens pas de résultat concluant :\
              • Partager sur Facebook
              • Partager sur Twitter
              Anonyme
                18 mai 2011 à 21:41:32

                C'est simple, tu mets 100% à la hauteur, et tu regarde la taille que prends ta bannière en pixel et tu mets cette valeur en margin top.
                Ce qui fait que ton div vaut "Toute la hauteur la page" (height) - "La taille de ta banière" (margin-top). T'as compris ? :)
                • Partager sur Facebook
                • Partager sur Twitter
                  18 mai 2011 à 21:50:03

                  C'est une très bonne solution que @can te propose

                  ça devrai fonctionner parfaitement
                  • Partager sur Facebook
                  • Partager sur Twitter
                    8 juin 2011 à 11:45:44

                    Bonjour à vous, :)

                    Je comprends vraiment pas >_< j'ai toujours le même problème qu'avant, On pourrait croire que la div central fait toute la page & que la div copyright est bien en bas, mais le problème est qu'il y a le scroll & qu'il y a un espace entre la fin de la page & le copyright :( , regardez par vous même :

                    Image utilisateur

                    Image utilisateur

                    Voici mes sources actuelles :

                    home_fr.php
                    <html>
                    	<head>
                    		<title>High Sport Community - 2011</title>
                    		<link type="text/css" rel="stylesheet" href="css/style.css" />
                    	</head>
                    	<body>
                    		<div id="header">
                    			<a href="home_fr.php"><img id="logo" src="img/logo/logo.png"/><p id="top">High Sport Community</p></a>
                    			<div id="connection">
                    			<ul>
                    			<li>Login <INPUT type="text" value="Login.." name="login"><br/></li>
                    			<li>Mot de passe <INPUT type="password" value="......." name="password"></li>
                    			<li><br><a href="inscription.php"/>Pas encore membre ?</a></li>
                    			</ul>
                    			</div>
                    		</div>
                    		<div id="menu">Lien - Lien - Lien - Lien</div>
                    		<div id="corps">
                    			ACCUEIL
                    			<div id="right_bar"> COLONNE DROITE</div>
                    			<div id="copyright">COPYRIGHT // PARTENAIRE ETC ..</div>
                    		</div>
                    	</body>
                    </html>
                    


                    style.css :

                    body{
                    font-family: "Verdana", Arial, Verdana, serif;
                    color:white;
                    background-color:252525;
                    margin: 0;
                    text-align: center; 
                    }
                    a
                    {
                    text-decoration: none;
                    color: white;
                    }
                    p{
                    font-size : 22px;
                    color: white;
                    }
                    div#header
                    {
                    margin:auto;
                    height:150px;
                    width:950px;
                    background-color:#363636;
                    }
                    img#logo
                    {
                    margin-left:50px;
                    float:left;
                    }
                    div#menu
                    {
                    margin-top:10px;
                    padding:2px;
                    height:26px;
                    text-align:center;
                    background-color:#363636;
                    }
                    div#corps
                    {
                    margin:auto;
                    margin-top:10px;
                    width:950px;
                    height: 100%;
                    background-color:#363636;
                    position:absolue;
                    }
                    div#right_bar
                    {
                    position:absolue;
                    background-color:#cccccc;
                    width:250px;
                    right:0;
                    float:right;
                    height:100%;
                    }
                    div#block_central{
                    position:relative;
                    width:700px;
                    }
                    div#copyright
                    {
                    padding-top:10px;
                    height:150px;
                    width:950px;
                    background-color:black;
                    position: absolute;
                    bottom: 0;
                    }
                    p#top
                    {
                    margin-top:75px;
                    float:left;
                    font-size:24px;
                    }
                    div#connection
                    {
                    float:right;
                    margin-top:30px;
                    margin-right:30px;
                    text-align:right;
                    }
                    ul {
                    list-style-type: none;
                    }
                    
                    • Partager sur Facebook
                    • Partager sur Twitter
                      8 juin 2011 à 11:51:10

                      Pour ce type de problèmes, afin que ça soit pareil sur tous les navigateurs, il faut utiliser du javascript.
                      Tu compte inclure du jQuery?
                      • Partager sur Facebook
                      • Partager sur Twitter
                        8 juin 2011 à 11:52:52

                        Bonjour,

                        Suivant ce que tu veux, ça peut être assez délicat, car il faut qu'il s'agrandisse aussi si le contenu dépasse la hauteur de la page.
                        J'avais fait un tuto qui allait à peu près dans ce sens (c'était pour placer un footer en bas) et qui n'a pas été validé, mais le résultat serait similaire à ce que tu attends, alors je te le copie-colle tel quel, si ça peut t'aider :

                        Citation : warpShadow

                        Lorsqu'un site possède une hauteur totale plus grande que l'écran sur lequel il est vu, on peut alors descendre la page vers le bas, jusqu'au bas de la page en question ; là, le défilement est arrêté, le pied-de-page, ou "footer" en anglais, est alors fixé naturellement au bas de la page et de l'écran.

                        Image utilisateurImage utilisateur



                        Mais dans le cas où la hauteur totale de la page est inférieure à la hauteur de l'écran, alors le pied-de-page, toujours placé au bas de la page, n'atteint pas le bas de l'écran.

                        Image utilisateur



                        Si certains design ne sont pas gênés par cette éventualité, ce n'est pas le cas de tous. Pour palier à ce problème, nous allons devoir faire en sorte que le design adopte la taille du contenu si la taille de la page est supérieure à la taille de l'écran, mais que la taille minimale de la page ne puisse pas être inférieure à la taille de l'écran.

                        Image utilisateur



                        Nous allons voir comment faire ceci. ^^

                        Nous partons donc sur cette base html :

                        <body>
                        	<div id="page">
                        		<div id="bloc-principal">
                        			<div id="header"></div>
                        			<div id="contenu">
                        				<div id="texte"></div>
                        				<div id="sidebar"></div>
                        			</div><!-- contenu -->
                        		</div><!-- fin bloc-principal -->
                        		<div id="footer"></div>
                        	</div><!-- fin page -->
                        </body>
                        



                        Image utilisateur
                        Le schéma du html



                        Pourquoi mettre le bloc "footer" en dehors de "bloc-principal" ? o_O


                        Toute l'astuce est là, c'est le fait de placer le pied-de-page en dehors du bloc du contenu qui va permettre de le fixer au bas de la page, mais aussi de l'empêcher de passer par-dessus le texte du contenu.


                        Allons-y !

                        La première étape est donc de donner à <html> une hauteur de 100%, qui servira à définir pour les balises enfants à quoi correspondent les valeurs en pourcentage que nous allons leur donner par la suite. La première balise enfant étant <body>, nous lui attribuons également cette valeur.

                        html, body {
                        	height: 100%;
                        }
                        



                        Il nous faut ensuite donner à notre conteneur principal, "page", une hauteur de 100%. Mais nous n'allons pas utiliser la propriété height, car celle-ci défini une hauteur définitive ; à la place, nous ferons usage de min-height, qui défini une hauteur minimale pour le conteneur : Ainsi, Si la fenêtre est plus grande que la page, alors le conteneur prendra toute la hauteur disponible, mais ne sera jamais plus petite que 100% -soit la taille du contenu de la page- et ne chevauchera donc jamais ledit contenu.

                        Il faut également préparer le positionnement du pied-de-page au bas du conteneur, aussi nous appliquons un paramètre de position relative à page.

                        #page {
                        	min-height: 100%;
                        	position: relative;
                        }
                        



                        Nous passons maintenant au conteneur "bloc-principal". L'astuce consiste à lui attribuer une marge interne de la hauteur du pied-de-page (ici, 100px). Cela a pour but de bien définir la fin du conteneur à la fin de son contenu. Sans ce paramètre, vous vous rendrez compte que le pied-de-page se superposerait au bas du contenu sur 120px, soit sa propre hauteur.

                        #bloc-principal {
                        	padding-bottom: 100px;
                        }
                        



                        Maintenant, nous nous attaquons au pied-de-page. Il faut que celui-ci ait tout d'abord une hauteur définie (même s'il s'agit d'un pourcentage), puis il faut lui affecter un positionnement absolu. Comme son parent direct, le conteneur "page", est en positionnement relatif, "footer" se sert de cette référence pour savoir où se positionner. Enfin, grâce au positionnement absolu, il suffira d'accrocher le conteneur au bas du bloc parent.

                        #footer {
                        	height: 100px;
                        	position: absolute;
                        	bottom: 0;
                        }
                        



                        Et nous y voici !



                        Citation : PooG

                        Pour ce type de problèmes, afin que ça soit pareil sur tous les navigateurs, il faut utiliser du javascript.


                        Meuh non ! ;)
                        • Partager sur Facebook
                        • Partager sur Twitter
                        Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
                          8 juin 2011 à 11:56:32

                          @warpShaow : C'est une belle solution (et surtout un beau tuto) mais ceci ne marchera pas sur IE<8 et je ne suis même pas certain que IE8 l'affiche bien.
                          • Partager sur Facebook
                          • Partager sur Twitter
                            8 juin 2011 à 12:15:30

                            IE8 l'affichera bien oui (testé) ; après, la question est de savoir si on veut se pencher sur IE7 ou l'aider à sombrer plus rapidement en faveur de ses successeurs et ses concurrents. ^^
                            • Partager sur Facebook
                            • Partager sur Twitter
                            Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
                              8 juin 2011 à 13:39:19

                              Merci warpShadow pour ton aide & ce tuto très bien expliquer ! Tout fonctionne nickel :D
                              • Partager sur Facebook
                              • Partager sur Twitter
                                8 juin 2011 à 13:39:52

                                Je t'en prie. Mets le sujet en résolu alors ;)
                                • Partager sur Facebook
                                • Partager sur Twitter
                                Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

                                Une div qui descend jusqu'en bas de la page

                                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                • Editeur
                                • Markdown