html - htr - ¿Cómo puedo hacer width=100%-100px en CSS?
htr html (18)
¿Estás usando el modo estándar? Esta solución depende de eso, creo.
Si intenta 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 un 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">
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 muestren.
¿Podría anidar un div con margin-left: 50px; y margin-right: 50px; dentro de un <div> con width: 100%; ?
Debe tener un contenedor para su div de contenido que desee que sea 100% - 100 px
#container {
width: 100%
}
#content {
margin-right:100px;
width:100%;
}
<div id="container">
<div id="content">
Your content here
</div>
</div>
Es posible que necesite agregar un div de compensación justo antes de la última </div> si su div de contenido se está desbordando.
<div style="clear:both; height:1px; line-height:0"> </div>
Empecé a funcionar para mí solo cuando revisé todos los espacios. Por lo tanto, no funcionó así: width: calc(100%- 20px) o calc(100%-20px) y trabajado perfectamente con width: calc(100% - 20px) .
Establecer los márgenes del cuerpo en 0, el ancho del contenedor exterior al 100% y usar un contenedor interno con márgenes izquierdos / derechos de 50px 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>
Esto funciona:
margin-right:100px;
width:auto;
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 caja: border-box incluye relleno y ancho de borde en el ancho de un artículo. Por ejemplo, si establece el ancho de un div con un margen de 20px 20px y un borde de 1px a 100px, el ancho real sería de 142px pero con el cuadro de borde, tanto el margen como el margen están dentro de los 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;
}
Ninguno de los dos es perfecto, por supuesto, el tamaño de la caja no se ajusta exactamente a la pregunta, ya que el elemento es en realidad un ancho del 100%, en lugar de 100% - 100px (sin embargo, un div infantil 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 de los padres.
La respuesta corta es que NO HACES esto en CSS. Internet Explorer tiene soporte para algo llamado CSS Expressions, pero esto no es estándar y definitivamente no es compatible con otros navegadores como Firefox por ejemplo.
Será mejor que hagas esto en JavaScript.
Los navegadores modernos ahora son compatibles con:
width: calc(100% - 100px);
Para ver la lista de versiones de navegador compatibles, consulte: ¿Puedo usar calc () como valor de unidad de CSS?
Hay un repliegue de jQuery: ancho de css: calc (100% -100px); alternativa usando jquery
No puedes.
Sin embargo, puede usar márgenes para efectuar el mismo resultado.
Podrías hacer:
margin-right: 50px;
margin-left: 50px;
Editar: mi solución es incorrecta. 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.
Puede buscar utilizar LESS , que es un archivo JavaScript que preprocesa su CSS para que pueda 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ías :)
Puedes probar esto ...
<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);
vw: ancho de la ventana gráfica
vh: altura de la ventana gráfica
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>
Trabajando con paneles bootstrap, estaba buscando cómo colocar el enlace "eliminar" en el panel del encabezado, que no serí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 sangrías. Source
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>
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 a este y establecerá el nuevo tamaño de ancho.
Suponiendo que está utilizando jQuery, podría hacer algo como eso:
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 con el 100%;
<div style="width: 200px; border: 1px solid red;">
<br>
<div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
<br>
</div>
<br>
</div>