html - div - ancho: 100% de relleno?

title atributo html

Question

Tengo una entrada html.

La entrada tiene padding: 5px 10px; Quiero que sea el 100% del ancho del div padre (que es fluido).

Sin embargo utilizando width: 100%; hace que la entrada sea 100% + 20px ¿cómo puedo 100% + 20px esto?

Example

Answer 1

¿Qué hay de envolverlo en un recipiente? Los contenedores deben tener un estilo como:

{
    width:100%;
    border: 10px solid transparent;
}

Answer 2

Aquí está la recomendación de codeontrack.com , que tiene buenos ejemplos de soluciones:

En lugar de establecer el ancho del div en 100%, configúrelo en automático, y asegúrese de que <div> esté configurado para mostrar: bloque (predeterminado para <div> ).

Answer 3

Es por eso que tenemos box-sizing en CSS.

He editado tu ejemplo, y ahora funciona en Safari, Chrome, Firefox y Opera. Échale un vistazo: http://jsfiddle.net/mathias/Bupr3/ Todo lo que agregué fue este:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Desafortunadamente, los navegadores más antiguos como IE7 no son compatibles con esto. Si está buscando una solución que funcione en IEs antiguas, consulte las otras respuestas.

Answer 4

Mueva el relleno de la casilla de entrada a un elemento de envoltura.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

Vea el ejemplo aquí: http://jsfiddle.net/L7wYD/1/

Answer 5

Prueba esto:

width: 100%;
box-sizing: border-box;

Answer 6

Puede hacerlo sin usar box-sizing y no soluciones claras como el width~=99% .

Demo en jsFiddle :

• Mantener el padding y el border
• Añadir a la entrada margin horizontal negativo = border-width + horizontal padding
• Agregar al padding horizontal de la envoltura de la entrada igual al margin del paso anterior

Marcado HTML:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input''s margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container''s width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Answer 7

Puedes hacerlo:

width: auto;
padding: 20px;

Answer 8

Puedes probar algunos trucos de posicionamiento. Puede colocar la entrada en un div con position: relative y una altura fija, luego en la entrada tener position: absolute; left: 0; right: 0; position: absolute; left: 0; right: 0; , y cualquier relleno que te guste.

Ejemplo vivo

Answer 9

Solo entiende la diferencia entre ancho: auto; y ancho: 100%; Ancho: auto; (AUTOMÁTICAMENTE) calculará el ancho para que se ajuste exactamente a la cantidad de envoltura que incluye el relleno. Ancho 100% expande el ancho y agrega el relleno.

Answer 10

Suponiendo que estoy en un contenedor con relleno de 15px, esto es lo que siempre uso para la parte interior:

width:auto;
right:15px;
left:15px;

Eso estirará la parte interior a cualquier ancho que deba ser menor que 15px a cada lado.

Aclamaciones

Andy

Answer 11

Tuve el mismo problema. Arreglalo así:

width: 100%;
padding: 5px;
/*--------------Now remove from padding what you''ve added---------------*/
margin:-5px;

Aclamaciones

Answer 12

Use el relleno en porcentajes también y elimínelo del ancho:

padding: 5%; width: 90%;

Answer 13

Utilizar css calc ()

Super simple y genial.

input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}​

Como se ve aquí: ancho de división 100% menos cantidad fija de píxeles
Por webvitaly ( https://.com/users/713523/webvitaly )
Fuente original: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

Solo copié esto aquí, porque casi lo extrañé en el otro hilo.

Answer 14

box-sizing: border-box es una forma rápida y fácil de solucionarlo:

Esto funcionará en todos los navegadores modernos , e IE8 +.

Aquí hay una demostración: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

Las versiones prefijadas del navegador ( -webkit-box-sizing , etc.) no son necesarias en los navegadores modernos.