html - medidas - ¿Es posible hacer un div 50px menos del 100% en CSS3?

medidas div css

Question

Esta pregunta ya tiene una respuesta aquí:

• CSS Cómo configurar div altura 100% menos nPx 11 respuestas

¿Es posible hacer un div 50px menos del 100% en CSS puro? Quiero que <div> sea ​​solo 50px menos del 100%. No quiero ningún JavaScript.

Answer 1

Mi solución funciona con y sin 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

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

Answer 2

Otra alternativa es el posicionamiento absoluto.

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

fiddle

Pero, la solución de Sandeep es la que usualmente debes usar. Sólo evite el uso excesivo de float . Esto evita que los elementos llenen naturalmente su contenedor.

Answer 3

Sí tu puedes. Sin usar la expression() de IE expression() , puedes hacerlo en CSS3 usando calc() .

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

Demostración: http://jsfiddle.net/thirtydot/Nw3yd/66/

Esto hará tu vida mucho más fácil. Actualmente se admite en los 3 navegadores principales: Firefox, Google Chrome (WebKit) e IE9: http://caniuse.com/calc

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

Answer 4

Sí, podemos hacerlo haciendo.

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

Gracias

Answer 5

Un DIV toma automáticamente el ancho de su padre. Así que no hay necesidad de definir ningún width . Normalmente simplemente lo escribiría así:

div{
    margin-right:50px;
}

Revisa este fiddle

Answer 6

jsFiddle

Utilizando block visualización y margin . display:block cuando no se combina con una height / width definida intentará rellenar su padre.

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>