Comment avoir un div de la taille d'un écran/résolution ?

Bonjour,

Cela fait plusieurs années que je parcours ce site mais aujourd'hui je me suis inscrite car je rencontre un problème pour mon site
En effet j'aimerais mettre un div avec un background-color de la taille de n'importe quel écran/résolution mais je voudrais avoir tout de même d'autre div en dessous qui serait visible seulement grâce au scroll.
Je ne sais pas si je suis très claire, mais j'ai trouvé un site qui a justement ce principe :
http://www.isnostud.io/

j'aimerais le faire seulement en CSS3 mais si je suis obligé d'utiliser du Jquery je serais preneuse de toutes vos astuces

Voici mon code :

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

#accueil{
position: absolute;
z-index: 1;
width:100%;
height:100%;
background-color:#f5f5f5;}


#about{
position:relative;
width: 100%;
height:400px;
padding-top: 125px;
padding-bottom: 125px;
text-align: center;
background-color:#ededed;}

Donc #accueil est le div que j'aimerais avoir en pleine page (il accepte de couvrir la largeur mais pas la hauteur de ma page) et #about et un des div que j'aimerais avoir dessous grâce au scroll.

J'espère que vous pourrez m'aider.
Modifié par kahla (31 Mar 2014 - 22:14)

Bonsoir,

Je n'ai pas trop d'outils pour tester rapidement, mais je dirais que :
1- tu as écrit heigh: au-lieu de height: sur #accueil
2- tu devrais appliquer heigh:100%; à body plutôt qu'un min-height
3- tu devrais appliquer min-height:100%; à #accueil plutôt qu'un height

Bonne chance

Bonsoir,

D'abord ça fait plaisir de servir d'exemple

Donc ce que j'ai utilisé sur mon site c'est un petit peu de code javascript. Au final c'est tout bête et assez logique :

    $(function() {
        // Sections height
        $(window).resize(function() {
            var sH = $(window).height();
            $('.NomDeTaClass').css('height', sH + 'px');
        });        
    });

Traduit en français ça donne :

• Tu créé une variable sH (pour moi c'était en rapport avec Section Height, d'où le "sH").
• On détermine que la variable sH est égale à la hauteur de la fenêtre du navigateur
• On a plus qu'à appliquer la valeur de sH dans notre CSS en disant que : l'élément qui a pour class ".NomDeTaClass" a pour hauteur sH pixels

J'espère que c'est assez clair pour toi.

Bon courage pour le développement de ton site.

Merci beaucoup, je ne pensais pas trouver son créateur ici je vais aussi tenter ta solution car je ne sais pas pourquoi mais ma div, placé dans sa div parent "#accueil", n'accepte pas de ce centré dans la hauteur... quand je bouge l'enfant, le parent bouge avec ou alors aucun des deux ne bouge
Et pourtant l'enfant a accepté de ce centré dans la largeur....
Bref, je vais voir si en utilisant du Javascript ça change quelque chose (même si j'en doute).
Et merci de ta traduction en français, j'aime comprendre ce que j'écris
Modifié par kahla (02 Apr 2014 - 18:52)