¿Cómo puedo hacer width = 100%

153

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.

html css

— fmsf
fuente

1

La pregunta vinculada stackoverflow.com/questions/11093943/… ofrece una respuesta interesante, pero no totalmente compatible con versiones anteriores, tal vez le gustaría echarle un vistazo también.

— 11684

55

Para cualquiera que cruce esta pregunta, Chad respondió que los navegadores modernos admiten width: calc(100% - 100px);que hay algunas respuestas y espero que el autor de la pregunta actualice su pregunta :) :)

— Anders M.

278

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

— Chad
fuente

13

Descubrí que cuando estaba usando, calc(100% - 6px)por ejemplo, se mostraba como calc(94%), tuve que escapar de la siguiente manera y ahora funcionawidth: calc(~"100% - 6px");

— nsilva

12

Tenga en cuenta que debe tener espacios en blanco alrededor del -(o +) carácter. Esto funciona: calc(100% - 100px); Y esto no:calc(100%-100px);

— freefaller

Estoy un poco sorprendido de que no haya ninguna opción para restar automáticamente 2 veces el relleno del elemento, lo que generalmente sería un caso de uso bastante común. Por ejemplo, termino teniendo que hacerlo padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);, y tendría que cambiarlo 0.25emen dos lugares ahora si tiene que ser modificado.

— cnst

Muchas gracias, también me gustaría señalar que funciona para agregar: (100% + 100px)

— Viktor Mellgren

99

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

— Aric TenEyck
fuente

44

ancho: calc (100% - 100px); esta es la respuesta correcta en su lugar.

— Sushan

17

Puedes probar esto ...

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

Expandir fragmento

vw: ancho de ventana

vh: altura de la ventana gráfica

— barış çıracı
fuente

La primera solución es correcta, el contenedor podría no ser la ventana y, por lo tanto, 100vh podría no ser igual al 100%

— Ben Taliadoros

1

Descubrí que cuando estaba usando, calc(100% - 6px)por ejemplo, se mostraba como calc(94%), tenía que escapar de la siguiente manera y ahora funcionawidth: calc(~"100% - 6px");

— nsilva

4

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>

ingrese la descripción de la imagen aquí

— lbsweek
fuente

66

¿Para qué es ese Javascript?

— Faiz

3

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>

— aleemb
fuente

1

Esto no funcionará. El ancho del contenido será del 100%: jsfiddle.net/cuezK/1

— gilly3

2

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>

— tvanfosson
fuente

2

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

— Artur Loginov
fuente

2

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).

— Alina Babycheva
fuente

1

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.

— Tina Orooji
fuente

3

Si haces esto, ¿no terminarás con un ancho total de 100% + 100px?

— Adam Crume

: o (Lo siento. ¿Debería eliminar mi publicación o dejarla y dejar que los votos

— negativos la

1

los votos negativos generalmente tienen el propósito de alentarlo a que limpie su publicación para que pueda recuperar puntos de representación perdidos por los votos negativos. Si sabe que su solución es incorrecta, puede eliminarla con o sin votos negativos o actualizarla para que sea correcta.

— aleemb

@AdamCrume - No Ese solo sería el caso si también especificaras width:100%. Un div llenará automáticamente el contenedor a menos que lo anule, por ejemplo, especificando explícitamente width, o usando floato posicionamiento absoluto. Agregar un margen a un div solo hará que llene su contenedor, menos la cantidad especificada por el margen.

— gilly3

@aleemb: en este caso, los votos negativos son de usuarios que no entienden css ya que esta respuesta es perfectamente correcta.

— gilly3

1

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>

— Josh Bush
fuente

1

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.

— Dave
fuente

0

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%;

— Boris Guéry
fuente

0

¿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">

— Hannson
fuente

0

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

— RC.
fuente

0

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 :)

— Jon
fuente

-1

No puedes

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

— Traingamer
fuente

-1

Esto funciona:

margin-right:100px;
width:auto;

— usuario1552559
fuente

1

¿Podría por favor agregar una explicación a su respuesta?

— Michał Perłakowski

Intenté: calc (100% -100px) y los resultados no son consistentes en todas las plataformas / navegadores, luego intenté simplificar realmente y utilicé el margen derecho: 100px; ancho: auto; y funcionó ...

— user1552559

calc es un componente CSS3 y este CSS funcionará en aquellos navegadores que admitan CSS3.

— Sushan

-2

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.

— Praveen Angyan
fuente

Sí, supongo que tendré que mantenerlo en JavaScript, estoy refractando un código y quería eliminar el JavaScript que estaba haciendo eso tks.

— fmsf

1

Por favor, si puede evitarlo, no lo haga en JavaScript. HTML + CSS puede ser complicado y la solución puede no ser obvia, pero es probable que pueda hacer casi cualquier cosa que necesite. Usar JavaScript para diseños estáticos es casi siempre una mala idea.

— Nicole

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