Il mio div è più grande della larghezza della mia finestra

Question

Questo è il css del mio div. Mi aspetto che il fondo per riempire l'intero schermo ma è più grande della mia risoluzione dello schermo, in modo da una barra di scorrimento in basso appare

.hero-unit { 
    padding:60px; 
    margin-top: 60px; 
    background: url("../img/bar2.jpg") no-repeat scroll 0; 
    height:233px; 
    width:100%; 
    left:0px; 
    background-size: cover; 
    position:absolute; 
    background-color:#eeeeee; 
} 

Answer 1

rimuovere padding se è necessario, per poi diminuire width.

cercare di tenerli in percentuali come

padding:5%; /*desired value*/ 
width:80%; /*desired value*/ 

quando verranno aggiunti, deve essere inferiore o uguale a 100%. Se si dispone di margin quindi considerarlo anche. (Assumere margin:5%;)

Per esempio:

<----------------100%----------------> 
    margin | padding| div |padding | margin 
|<--5%-->|<--5%-->|<--80%-->|<--5%-->|<--5%-->| 

Questo è lo stesso per orizzontale (larghezza) o verticale regolazioni (altezza).

Answer 2

Si sta aggiungendo il riempimento alla larghezza già del 100%.

Ciò che è necessario fare (se si utilizzano le percentuali) è modificare il riempimento in percentuale e aumentare fino al 100 percento.

Ad esempio:

padding:5%; 
width:90%; 

---

Ho anche trovato un'alternativa usando overflow: hidden per rimuovere la barra di scorrimento. Questo non rimuoverà il problema anche se il padding continuerà a traboccare dalla finestra, ma non in modo visibile.

html, body 
{ 
    width:100%; 
} 

body 
{ 
    overflow:hidden; 
} 

Vedere il jsfiddle here.

Answer 3

Ciò potrebbe essere dovuto ai margini e all'imbottitura del corpo.

Aggiungi questo blocco al vostro corpo per vedere se aiuta:

body { 
    margin: 0 
    padding: 0 
} 

Inoltre, si sta definendo imbottitura per un elemento già al 100%, il che rende più grande rispetto al corpo.

Answer 4

È possibile utilizzare box-sizing

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box; 

Questo rende così quando si aggiungono padding, margini, o confina non effettuerà la larghezza. (questo non funzionerà in IE7 e in basso)

Answer 5

Spesso un overflow orizzontale si verifica a causa di un elemento la cui opacità è 0. Non è possibile visualizzare l'elemento ma si verifica un overflow orizzontale. Aggiungi il seguente codice a css.

body { 
overflow-x: hidden; 
} 
.hidden-thing { 
position: absolute; 
left: 100%; 
width: 50px; 
height: 50px; 
opacity: 0; 
}