Body qui ne fait pas la hauteur entière de ma page

Sujet résolu

21 mai 2017 à 12:16:13

Bonjour,

Alors avant toute chose je sais que ce sujet a déjà été évoqué sur le forum avec la solution du : html, body { height : 100%; }

Cependant pour ma part cela ne fonctionne pas.

Donc comme l'indique le titre du sujet mon body ne fait prend pas la taille entière de ma page malgré un height : 100%

J'ai donc du contenu qui "sort" du body quand je regarde avec l'inspecteur sur Chrome, malgré que dans mon code soit contenu dans mon <body></body>.

Voila mon code html :

<!DOCTYPE html>
<html>
<head>
    
    <meta http-equiv="Content-Type" content = "text/html;charset=utf8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <link rel="shortcut icon" type="image/x-icon" href="icon.png" />



    <title>Scratch It !</title>
    
</head>



<body>
    <div class="site-container">
        <div class="site-pusher">
        <header class="header">
            <a href="#" class="header__icon" id="header__icon"></a>
            <a href="index.html" class="header__logo">Scratch It !</a>
            <nav class="menu">
                <a href="#">Catégories</a>
                <a href="#"> À propos</a>
                <a href="#"> Contact</a>
                <a href="#">Social</a>
                

            </nav>


        </header>

            <div class="site-content">
                <div class="container">
                    <div class="titre-acceuil">Les dernières actualités :</div>
                
                        <div class="banner">
                                <div class="new-article">
                                    DIAPORAMA ARTICLE


                                </div>
                        </div>
                    
                    <div class="snd-content">
                    
                    <div class="right-banner">
                        PUBLICITÉ/AUTRE

                                </div>
                            <div class="articles">
                                <div class="liste-article">
                                    
                                    <div class="article--1"><p class="titre">Titre article</p>
                                        <div class="article-1">



                                        </div>
                                    </div>
                                    
                                    <div
                                        <div class="article-2">
                                            <h2>Article 2</h2>

                                        </div>

                                    <div class="article-3">
                                        <h2>Article 3</h2>                            </div>


                                    <div class="article-4">
                                         <h2>Article 4</h2>

                                    </div>
                            
                           
                                </div>
                            </div>
                      
                        
                     </div>
                    
                    <div class="footer">Footer</div>
                </div>
                                        

            
            </div>

      <div class="site-cache" id="site-cache"></div>
        

     </div>
          
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
       
    
</body>
</html>

et mon CSS :

    


/******************************\
            BASE
\******************************/

html, body { height : 100%; }



body{
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    width: 100%;
    background-color: #6b6868;
    display: block;
    position: static;


    margin: 0;
    padding: 0;
}












/******************************\
            HEADER
\******************************/

.header{
    position: static;
    left: 0;
    right: 0;
    height: 80px;
    
    line-height: 80px;
    color: #ffffff;
    
    background-color: #403e3e;
}

a{
    text-decoration: none;
    color: inherit;
}

.header__logo{
    font-family: 'logo';
    font-size: 25px;
    padding: 0 25px;
    float: left;
}

.header__logo:hover{

    color: #E53935;
}












/******************************\
            MENU
\******************************/

.menu{
    float: right;
}

.menu a {
    padding: 0 10px;
}

.menu a:hover{
    color: #E53935;
}










/******************************\
            CONTENU
\******************************/

.site-container{
    display: block;
    height: 100%;
    
}
.titre-acceuil{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: underline;
    font-size: 25px;
    color: white;
}
    

.right-banner{
    background-color: #D32F2F;
    height: 700px;
    width: 18%;
    float: right;
    margin-right: 10px;
}

.new-article{
    
    margin: auto;
    float: left;
    
    right: 0;
    margin-top: 5px;
    height: 400px;
    width: 100%;
    background-color: #B0BEC5;

}

.banner{
    padding-top: 20px;
    width: 100%;
    height: 400px;
    
   
}
.articles{
    background-color: #EEEEEE;
    width: 75%;
    height: 1270px;
    margin-left: 20px;
    margin-bottom: 50px;
    padding-left: 10px; 
    padding-right: 10px;
}

.articles a {
    color: white;
}

.snd-content{
    display: block;
    margin-top: 30px;
    height: 800px;
    width: 100%;
    padding-top: 0px;

}

 .titre{
        position: relative;
        margin: 0px;
         display: inline;
     color: #ffffff;
    }
    
    
    
    img{
        width: 100%;
        height: 100%;
        position: absolute;
    }

.liste-article{
    height: 100%;
    width: 100%;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
        border-radius: 5px;


    background-color: #999696;
}

.articles{
    
    margin: 0;
    padding: 0;
    height: 1000px;
}

.article-1{
    /*background-color: orange;*/
    background-color: orange;
    width: 100%;
    height: 200px;
    margin-top: 10px;
    margin-bottom: 10px;
   
    float: left;
}

.article-2{
    background-color: orange;
    width: 100%;
    height: 200px;
    margin-top: 10px;
    margin-bottom: 10px;
    
    float: right;
}


.article-3{
    bottom: 0;
    background-color: orange;
    width: 100%;
    height: 200px;
    margin-top: 10px;
    margin-bottom: 10px;
    
    float: right;
}


.article-4{
    bottom: 0;
    background-color: orange;
    width: 100%;
    height: 200px;
    margin-top: 10px;
    margin-bottom: 10px;
    
    float: left;
}
















/******************************\
            FOOTER
\******************************/
.footer{
        bottom: 0;
        height: 30px;
        width: 100%;
        background-color: red;
        position: static;
    }

Je ne suis pas un pro du web, donc il se peut que mon code ne soit pas top, mais je pense que dans l'ensemble c'est pas trop mal !

Si vous avez la solution à mon problème ou même une piste qui pourrait m'aider à avancer je suis toute ouïe

Merci à vous et bonne journée !

-
Edité par grimeg 21 mai 2017 à 12:18:00

Lucky13

21 mai 2017 à 12:32:56

Hello,

Ton body n'a pas besoin de tout cela, et non plus de width.

essais avec ceci : min-height: 100vh; margin: 0;

vh = hauteur du viewport.

-
Edité par Lucky13 21 mai 2017 à 12:35:34

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

grimeg

21 mai 2017 à 12:48:46

Je viens d'essayer j'ai retiré aussi le width.

En effet il y a un mieux le body descend plus que ce que j'avais mais pas encore à fond.

EmmanuelBeziat

21 mai 2017 à 13:21:56

Salut,

Je suppose que le but, c'est ça ? https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

grimeg

21 mai 2017 à 16:57:48

Une image sera plus simple pour tout le monde
Comme vous le voyez, le contenu est en dehors du body ( en bleu ) et ducoup mon footer lui se met en bas du body et tout est décalé ....

romdum

21 mai 2017 à 17:11:24

Ligne 66 de ton HTML tu as ça :

<div

qui ne se ferme jamais. Ça ne va probablement pas résoudre ton problème mais ça t'en évitera certainement d'autres.

-
Edité par romdum 21 mai 2017 à 17:11:53

duminil.eu

Asot

21 mai 2017 à 17:18:39

Salut, lorsque tu écris :

/******************************\
            HEADER
\******************************/

a {
    text-decoration: none;
    color: inherit;
}

c'est ambigu pour celui ou celle va relire ton code car ce type de ciblage est trop générique pour le mettre dans la catégorie header.

-
Edité par Asot 21 mai 2017 à 17:20:59

grimeg

21 mai 2017 à 17:32:10

Asot a écrit:

Salut, lorsque tu écris :
/******************************\
            HEADER
\******************************/

a {
    text-decoration: none;
    color: inherit;
}
c'est ambigu pour celui ou celle va relire ton code car ce type de ciblage est trop générique pour le mettre dans la catégorie header.

-
Edité par Asot il y a 11 minutes

@Asot c'est mon propre site je serais tout seul dessus, mais effectivement j'aurais du mettre ça dans la "base"

romdum a écrit:
Ligne 66 de ton HTML tu as ça :
<div
qui ne se ferme jamais. Ça ne va probablement pas résoudre ton problème mais ça t'en évitera certainement d'autres.

-
Edité par romdum il y a 20 minutes
@romdum merci bien vu, j'ai corrigé ça n'a rien changé mais effectivement ça m'évitera d'autres boulettes

-
Edité par grimeg 21 mai 2017 à 17:34:59

romdum

21 mai 2017 à 18:31:15

Tu peux passer ton HTML dans le validateur pour éviter ce genre d'erreur, c'est assez pratique :

https://validator.w3.org/#validate_by_input

duminil.eu

grimeg

21 mai 2017 à 19:23:31

romdum a écrit:

Ligne 66 de ton HTML tu as ça :
<div
qui ne se ferme jamais. Ça ne va probablement pas résoudre ton problème mais ça t'en évitera certainement d'autres.

-
Edité par romdum il y a 20 minutes

@romdum merci bien vu, j'ai corrigé ça n'a rien changé mais effectivement ça m'évitera d'autres boulettes

grimeg

23 mai 2017 à 10:39:35

Je me permet de UP

grimeg

25 mai 2017 à 13:05:37

Finalement j'ai réussi.
C'était un problème d'hauteur de div .... J'ai passé trop de temps dessus j'aurais du le voir dès le début