Est-il possible de faire un div 50px moins de 100% en CSS3?

Question

Est-il possible de faire un div 50px moins de 100% en pur CSS? Je veux l' <div> à seulement 50px moins de 100%. Je ne veux pas de JavaScript.

Answer 1

Oui, vous pouvez. Sans l'aide de l'IE expression(), vous pouvez le faire en CSS3 en utilisant calc().

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

Démo: http://jsfiddle.net/thirtydot/Nw3yd/66/

Cela rendra votre vie beaucoup plus facile. Il est actuellement pris en charge dans les 3 principaux navigateurs: Firefox, Google Chrome (WebKit), et IE9: http://caniuse.com/calc

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

Answer 2

Un DIV qui prend automatiquement l'un de ses parents largeur. Donc, il n'est pas nécessaire de définir n'importe quel width. Normalement tout simplement l'écrire comme ceci:

div{
    margin-right:50px;
}

Cochez cette violon

Answer 3

Une autre alternative est le positionnement absolu.

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

violon

Mais, Sandeep la solution de l'autre, vous devez généralement utiliser. Juste éviter la surutilisation float. Cela empêche les éléments de naturellement de remplissage du conteneur.

Answer 4

Ma solution fonctionne avec et sans 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; 
}​

Démo

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

Answer 5

jsFiddle

À l'aide de l'affichage block et margin. display:block lorsqu'il n'est pas combiné avec un définies height/width va essayer de remplir un parent.

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>