È possibile fare un div 50px inferiore al 100% in CSS3?

Question

E 'possibile creare uno div 50px inferiore al 100% in puro CSS? Voglio che lo <div> sia solo 50px in meno del 100%. Non voglio alcun JavaScript.

Answer 1

Sì, è possibile. Senza utilizzare IE expression(), è possibile farlo in CSS3 utilizzando calc().

div { 
    width: 100%; 
    width: -webkit-calc(100% - 50px); 
    width: -moz-calc(100% - 50px); 
    width: calc(100% - 50px); 
} 

Demo: http://jsfiddle.net/thirtydot/Nw3yd/66/

Questo renderà la vostra vita molto più facile. Esso è attualmente supportato nelle 3 principali browser: Firefox, Google Chrome (WebKit), e IE9: http://caniuse.com/calc

MDN: https://developer.mozilla.org/en/CSS/-moz-calc

Answer 2

Un DIV prende automaticamente la larghezza del suo genitore. Quindi non è necessario definire alcun width. Normalmente sarebbe sufficiente scrivere in questo modo:

div{ 
    margin-right:50px; 
} 

Verifica questo fiddle

Answer 3

Un'altra alternativa è il posizionamento assoluto.

div { 
    position: absolute; 
    left: 0; 
    right: 50px; 
} 

fiddle

Ma, la soluzione di Sandeep è quello che si dovrebbe normalmente usare. Basta evitare l'uso eccessivo di float. Ciò impedisce agli elementi di riempire naturalmente il loro contenitore.

Answer 4

Sì possiamo farlo facendo

#custom_div{ 
width:100%; 
margin-right:50px; 
} 

Grazie

Answer 5

La mia soluzione funziona con e senza float: left.

HTML:

<div></div> 

css:

div { 
    height: 20px; 
    background: black; 
    float: left; 
    width: 100%; 
    padding-right: 50px; 
    box-sizing: border-box; 
    background-clip: content-box; 
}​ 

Demo

Compatibilità:
Firefox 3.6, Safari 5, Chrome 6, Opera 10, IE 9

Answer 6

jsFiddle

Utilizzo del display block e margin. display:block quando non combinato con un numero definito height/width proverà a riempire il suo genitore.

header { 
    width:100%; 
    background:#d0d0d0; 
    height:100%; 
} 
h1 { 
    display:block; 
    border:#000 solid 1px; 
    margin:0 50px 0 0; 
    height:100px; 
} 
<header> 
    <h1></h1> 
</header>