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>