web-dev-qa-db-fra.com

Faire div 100% Largeur de la fenêtre du navigateur

J'essaie de faire l'un de mes conteneurs 100% de la largeur de l'écran.

Voici mon SASS

body, html { 
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#neo_wrapper {  
    width: 960px;
    height: 1500px;
    margin: 0 auto;

    #neo_main_container1 {  /* Slide1 container */
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: #999999;
        z-index: 350;

        #neo_scroll_button {    /* Div that enables scroll */
            position: absolute;
            bottom: 35px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 150px;
            height: 15px;
            background: #F00;
            color: #FFF;
            text-align: center;
            line-height: 15px;
            display: table; 

            a { 
                &:link {text-decoration: none; color: #FFF;}
                &:visited {text-decoration: none; color: #FFF;}
            }
       }
    }

     #neo_main_container2 {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: #CCC;
        z-index: 300;

        #neo_img_container {
           float: left;
           width: 350px;
           height: 500px;
            margin: 0 auto;
            margin-right: 15px;
         }

        #neo_text_container {
            float: left;
            width: 50%;
            height: 500px;
            margin: 0 auto;
        }
    }
 }

Et HTML 

<body>
<div id="neo_wrapper">
    <div id="neo_main_container1">  <!-- Start container1 -->
        <div id="neo_scroll_button" onClick="scrollBelow()">
            <p>Enter</p>
        </div>
    </div>  <!-- End of container1 -->
    <div id="neo_main_container2">  <!-- Start container2 -->
        <div id="neo_img_container">
            <img src="http://fpoimagery.com/?t=px&w=350&h=250&bg=0ff&fg=000000" />
        </div>
        <div id="neo_text_container">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>  <!-- End container2 -->
</div>

Je veux que # neo_main_container1 soit sur toute la largeur de l'écran. Évidemment, parce que c'est un enfant de #neo_wrapper, régler la largeur à 100% le rendra à 960px. Je suis sûr que la façon de contourner ce problème, toute aide serait la bienvenue.

Mise à jour: Voici mon violon JS: http://jsfiddle.net/VkqjH/

htmlcsssassfullscreen
8
Mike K.

Il y a de nouvelles unités que vous pouvez utiliser:

vw - largeur de la fenêtre

vh - hauteur de la fenêtre

#neo_main_container1
{
   width: 100%; //fallback
   width: 100vw;
}

Aide / MDN

Opera Mini ne le supporte pas, mais vous pouvez l'utiliser dans tous les autres navigateurs modernes.

Puis-je utiliser

 enter image description here

32
Luke
.myDiv {
    background-color: red;
    width: 100%;
    min-height: 100vh;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
}

Fondamentalement, nous fixons la position de la div indépendamment de son parent , puis nous la positionnons en utilisant margin: 0 auto; et définit sa position dans le coin supérieur gauche.

3
Christopher 'Solidus' DeJong

Si width:100% fonctionne dans tous les cas, utilisez-le, sinon vous pouvez utiliser vw dans ce cas, qui correspond à 1% de la largeur de la fenêtre.

Cela signifie que si vous voulez couvrir la largeur, utilisez simplement 100vw.

Regardez l'image que je dessine pour vous ici:

 enter image description here

Essayez l'extrait que j'ai créé pour vous comme ci-dessous:

.full-width {
  width: 100vw;
  height: 100px;
  margin-bottom: 40px;
  background-color: red;
}

.one-vw-width {
  width: 1vw;
  height: 100px;
  background-color: red;
}
<div class="full-width"></div>
<div class="one-vw-width"></div>

0
Alireza