2011-03-16 17 views
26

que tienen un elemento en el DOM que yo simplemente les gusta tener llenar el ancho de su matriz, independientemente de lo que es:CSS para "fill parent?"

<div width="800"> 
    <div class="filler"></div> 
</div> 

¿Cómo puedo especificar en el CSS que la clase filler coincide con la anchura de su ¿padre?

.filler { 
    ? 
} 
+1

Por defecto, un elemento de bloque (por ejemplo 'div') llenarán su padre ... se puede especificar' width: 100%; 'si así se quiere, aunque eso es el valor predeterminado, y causará problemas si tiene relleno/margen/bordes en algunos navegadores;) – Rudu

Respuesta

21

Ha intentado: width: 100%;?

+2

¿No significa eso que el ancho de 'a' debe ser el 100% del navegador actual? Cuando lo hice en el pasado, estoy bastante seguro de que ese fue el resultado. –

+1

@TK No, a menos que se especifique la posición absoluta, las dimensiones son relativas al elemento principal. – BinaryTox1n

1

div es un elemento de bloque y por defecto llena su padre.
si no es probable que use float:left o float:right o display:inline o su padre no es de 800px.
(tal vez deberías probar con style="width:800px" o width="800px" en lugar de width="800")
Normalmente pongo un borde de color para ver cómo funciona.

1

A menos que haya algo que los detenga, elementos de nivel de bloque como div y p siempre llenarán todo el ancho de su contenedor. Si tiene un elemento en línea como span o a, puede darle un estilo como display: block para convertirlo en un elemento de nivel de bloque, pero esto también pondrá un salto de línea antes y después.

29

Dependiendo de lo que sea su elemento interno, existen varios enfoques.

Si se trata de un elemento de nivel de bloque (un párrafo, un div, etc.), se ajustará automáticamente para ocupar el 100% del ancho del contenedor.

Si se trata de un elemento en línea, demasiado malo para usted, no aceptará width:100% hasta que lo convierta en un elemento de nivel de bloque: display:block.

Los elementos flotantes son un caso especial: solo abarcarán el ancho de su contenido interno, incluso si son elementos de nivel de bloque. Requieren width:100%.

Los elementos posicionados por completo son aún más difíciles: necesitan width:100%, pero el contenedor también necesita un contexto de posicionamiento, por ej. position:relative.

ejemplos de los cuatro casos: http://jsfiddle.net/dD7E4/

+0

es posible asignar 'width: 100%' a elementos en línea como span o inline-block. – Magne

+0

@Magne, me permito diferir. Inline-block acepta felizmente 'width: 100%' debido a su naturaleza similar a un bloque, pero un barebones, unstyled 'span' no lo hará. – mingos

+0

puede tener razón sobre el 'lapso '. No lo he probado. Pero tanto el bloque en línea como el tramo se tratan como elementos en línea fuera, así que asumí que el comportamiento sería el mismo. – Magne