¿Cómo puedo hacer width = 100% - 100px en CSS?

En CSS, ¿cómo puedo hacer algo como esto?

width: 100% - 100px;

Supongo que esto es bastante simple, pero es un poco difícil encontrar ejemplos que lo demuestren.

Los navegadores modernos ahora admiten:

width: calc(100% - 100px);

Para ver la lista de versiones de navegador admitidas, ¿puede usar calc () como valor de unidad CSS?

Hay una reserva de jQuery: css ancho: calc (100% -100px); alternativa usando jquery

¿Podrías anidar un div con margin-left: 50px;y margin-right: 50px;dentro de un <div>con width: 100%;?

Puedes probar esto ...

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);

vw: ancho de ventana

vh: altura de la ventana gráfica

mi código, y funciona para IE6:

<style>
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

</style>

<div id="container">
  <div id="header">header</div>
  <div id="mainContent">
    <div id="sidebar">left</div>
    <div id="content">right 100% - 100px</div>
  <span style="display:none"></span></div>
</div>

Debe tener un contenedor para su div de contenido que desea que sea 100% - 100px

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

Es posible que deba agregar un div de limpieza justo antes del último </div>si su div de contenido se desborda.

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>

Establecer los márgenes del cuerpo a 0, el ancho del contenedor externo al 100%, y usar un contenedor interno con 50px márgenes izquierdo / derecho parece funcionar.

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>

Al trabajar con paneles de arranque, buscaba cómo colocar el enlace "eliminar" en el panel de encabezado, que no estaría oscurecido por el elemento vecino largo. Y aquí está la solución:

html:

<div class="with-right-link">
    <a class="left-link" href="#">Long link header Long link header</a>
    <a class="right-link" href="#">Delete</a>
</div>

css:

.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }

Por supuesto, puede modificar los valores "superior" y "derecho", de acuerdo con sus hendiduras. Fuente

Comenzó a funcionar para mí solo cuando revisé todos los espacios. Entonces, no funcionó así: width: calc(100%- 20px)o calc(100%-20px)funcionó perfectamente width: calc(100% - 20px).

Podrías hacer:

margin-right: 50px;
margin-left: 50px;

Editar: mi solución está mal. La solución publicada por Aric TenEyck que sugiere usar un div con un ancho del 100% y luego anidar otro div usando los márgenes parece más correcto.

El relleno en el div externo obtendrá el efecto deseado.

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>

Hay 2 técnicas que pueden ser útiles para este escenario común. Cada uno tiene sus inconvenientes, pero ambos pueden ser útiles a veces.

tamaño de la caja: border-box incluye relleno y ancho del borde en el ancho de un elemento. Por ejemplo, si establece el ancho de un div con 20px 20px padding y 1px border a 100px, el ancho real sería 142px pero con border-box, tanto el relleno como el margen están dentro de 100px.

.bb{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     
    width: 100%;
    height:200px;
    padding: 50px;
}

Aquí hay un excelente artículo sobre él: http://css-tricks.com/box-sizing/ y aquí hay un violín http://jsfiddle.net/L3Rvw/

Y luego está la posición: absoluta

.padded{
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    background-color: #aefebc;
}

http://jsfiddle.net/Mw9CT/1/

Tampoco son perfectos, por supuesto, el tamaño de la caja no se ajusta exactamente a la pregunta, ya que el elemento es en realidad 100% de ancho, en lugar de 100% - 100px (sin embargo, un elemento secundario sería). Y el posicionamiento absoluto definitivamente no se puede usar en todas las situaciones, pero generalmente está bien siempre que se establezca la altura principal.

CSS no se puede usar para animación, o cualquier modificación de estilo en eventos.

La única forma es usar una función de JavaScript, que devolverá el ancho de un elemento dado, luego, restará 100 píxeles y establecerá el nuevo tamaño de ancho.

Suponiendo que está utilizando jQuery, podría hacer algo así:

oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);

Y con javascript nativo:

oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';

Suponemos que tiene un estilo CSS establecido con 100%;

¿Estás usando el modo estándar? Esta solución depende de ello, creo.

Si está tratando de hacer 2 columnas, podría hacer algo como esto:

<div id="outer">
    <div id="left">
        sidebar
    </div>
    <div id="main">
        lorem ispsum etc... 
    </div>
</div>

Luego usa CSS para darle estilo:

div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}

Si no quieres 2 columnas, probablemente puedas eliminar <div id="left">

<div style="width: 200px; border: 1px solid red;">
    <br>
    <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
        <br>
    </div>
    <br>
</div>

Puede usar LESS , que es un archivo JavaScript que procesa previamente su CSS para poder incluir lógica y variables en su CSS. Entonces, para su ejemplo, en MENOS escribiría width: 100% - 100px;para lograr exactamente lo que quería :)

No puedes

Sin embargo, puede utilizar márgenes para obtener el mismo resultado.

Esto funciona:

margin-right:100px;
width:auto;

La respuesta corta es que NO hagas esto en CSS. Internet Explorer tiene soporte para algo llamado Expresiones CSS, pero esto no es estándar y definitivamente no es compatible con otros navegadores como FireFox, por ejemplo.

Sería mejor hacer esto en JavaScript.