Czy w CSS3 można utworzyć 50px mniej niż 100%?

Question

Czy można uzyskać wartość 100px mniejszą niż 100% w czystym CSS? Chcę, aby model <div> był tylko 50px mniejszy niż 100%. Nie chcę żadnego JavaScript.

Answer 1

Tak, można. Bez użycia IE expression(), możesz to zrobić w CSS3 przy użyciu 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/

To uczyni Twoje życie o wiele łatwiejsze. To jest obecnie obsługiwana w 3 głównych przeglądarek: Firefox, Google Chrome (WebKit) oraz IE9: http://caniuse.com/calc

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

Answer 2

DIV automatycznie przyjmuje szerokość jego rodzica. Nie ma więc potrzeby definiowania żadnego width. Zwykle po prostu napisać to tak:

div{ 
    margin-right:50px; 
} 

Sprawdź to fiddle

Answer 3

Inną alternatywą jest pozycjonowanie bezwzględne.

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

fiddle

Ale rozwiązanie Sandeep jest jeden należy zazwyczaj użyć. Po prostu unikaj nadużywania float. Zapobiega to naturalnemu napełnianiu pojemnika.

Answer 4

Tak, możemy to zrobić poprzez

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

Dzięki

Answer 5

Moje rozwiązanie działa i bez 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

Kompatybilność:
Firefox 3.6, Safari 5, Chrome 6, Opera 10, IE 9

Answer 6

jsFiddle

Korzystanie z wyświetlacza block i margin. display:block, gdy nie jest połączony ze zdefiniowanym height/width, spróbuje wypełnić obiekt nadrzędny.

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>