Divisione div 100% Larghezza della finestra del browser

Sto provando a creare uno dei miei contenitori al 100% della larghezza dello schermo.Divisione div 100% Larghezza della finestra del browser

Ecco il mio 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; 
     } 
    } 
}

e 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>

voglio # neo_main_container1 di essere l'intera larghezza dello schermo. Ovviamente perché è un figlio di #neo_wrapper, l'impostazione della larghezza al 100% lo renderà 960px. Sono sicuro di come aggirare questo problema, quindi qualsiasi aiuto sarebbe apprezzato.

Aggiornamento: Ecco la mia JS violino: http://jsfiddle.net/VkqjH/

fonte

2014-07-17 Mike K.

Ci sono nuove unità che è possibile utilizzare:

vw - viewport larghezza

vh - altezza finestra

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

Help/MDN

Opera Mini non supporta questo, ma è possibile utilizzarlo in tutti gli altri browser moderni.

CanIUse

fonte

2014-07-17 16:18:34 Luke

L'elemento avrà parte del suo contenuto nascosto da qualche parte all'interno del suo genitore, a meno che il genitore non abbia scroll. – melancia

Ha chiesto solo il dimensionamento: P – Luke

Lo so, ma è sicuro assumere quello che l'OP vuole. Stanno già usando 'width: 100%'. – melancia

cercare di dare un postion: absolute;

fonte

2014-07-17 16:18:53

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

In sostanza, stiamo fissare la posizione del div indipendentemente dal suo genitore, e quindi posizionarlo con margin: 0 auto; e imposta la sua posizione nell'angolo in alto a sinistra.

fonte

2014-07-17 16:22:42

Posizionare in modo assoluto che div sembra eliminare il contenuto che ho nel mio secondo contenitore –

Quindi è probabilmente su un diverso livello z-index. Prova ad aggiustare lo z-index aggiungendo 'z-index: 300;' per il div più basso, e poi fai la stessa cosa ma dagli un indice z di 350 per quello più alto. –

Sembra non fare nulla (ha dato a # neo_main_container1 uno z-index di 350 e # neo_main_container2 z-index di 300) –

-1

è stato in grado di capirlo usando JavaScript

var winHeight = 0; /* Window height */ 
var winWidth = 0; /* Window width */ 


$(document).ready(function() { 


setContainerDims(); 


function setContainerDims(){ 
    winHeight = parseInt($(window).height()); 
    winWidth = parseInt($(window).width()); 

    $("#neo_home_container").css({"width":winWidth,"height":winHeight}); 
} 



$(window).resize(function(){ 
    setContainerDims(); 
}) 

});

fonte

2014-07-22 14:39:45

Se width:100% opere in ogni caso, basta usare che, in caso contrario è possibile utilizzare vw in questo caso, che è relativo al 1% della larghezza della finestra .

Ciò significa che se si vuole coprire la larghezza, basta usare 100vw.

Guardate l'immagine che ho sorteggio per voi qui:

Prova il frammento che ho creato per te, come di seguito:

.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>

fonte

2017-06-16 07:06:39 Alireza

Divisione div 100% Larghezza della finestra del browser

risposta

Problemi correlati