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

Respuestas: