configuración altura 100% no funciona

Por alguna razón, los límites del contenedor no llegarán al fondo a pesar de que su altura sea del 100%. Aquí está mi código, el contenedor está debajo de otro centro div.configuración altura 100% no funciona

HTML

<div id="center"> 
<div class="container" > 
</div> 
</div>

css

#center { 
    float:left; 
    width:20%; 
    margin-top:10px; 
    height:100%; 
} 

.container { 
    margin-top:3px; 
    height:100%; 
    border:2px solid #dedede; 
    width:600px; 
}

Fuente

2011-07-29 katie

La parte inferior de qué? – random

100% de * qué *? –

@parte inferior de la ventana del navegador – katie

Vas a tener que incluir algo como esto en tu CSS ...

body, html{ 
    height: 98%; 
    padding: 0; 
}

Juega un poco con la altura para eliminar las barras de desplazamiento verticales causadas por márgenes y los bordes de los elementos que contiene.

http://jsfiddle.net/4JgA4/1/

EDIT:

De lo contrario, hacen que sea 100% y reducir la altura del elemento principal dentro para eliminar barras de desplazamiento verticales.

body, html { 
height: 100%; 
padding: 0; 
} 

#center { 
float:left; 
width:20%; 
margin-top:10px; 
height:90%; 
} 

.container { 
    margin-top:3px; 
    height:100%; 
    border:2px solid #dedede; 
    width:600px; 
}

http://jsfiddle.net/4JgA4/3/

Fuente

2011-07-29 22:00:23 Sparky

En lugar de jugar con porcentajes también puede establecer el tamaño de la caja en el cuadro de la frontera: 'tamaño de la caja: border-box;' Eso es lo primero que hago cuando comienzo un nuevo proyecto. –

tu ID = 'centro' div tiene que estar dentro de algo con la altura.

Esto me ayuda: cada vez que configuro un estilo de ancho o alto = 100% me pregunto: "¿100% de QUÉ?" Eso me impulsa a asegurarme de que sea cual sea el elemento que esté dentro también está diseñado correctamente para ancho y alto.

Además, ponga diferentes bordes de colores alrededor de las cosas para ver dónde y qué tan grandes son en realidad. Puede arruinar las dimensiones, pero te da una buena idea de lo que realmente está sucediendo.

Fuente

2011-07-29 21:15:43 n8wrl

'outline' se puede usar en lugar de' border' para una depuración rápida (aunque podría decirse que Firebug funciona igual de bien dejando menos residuos para eliminar). La ventaja de 'outline' es que no (err, * should not *) no afecta el flujo. –

@ n8wrl ¿quiere decir que el centro div debe tener una altura absoluta como establecerlo en píxeles? – katie

Para una propiedad que funcione al 100% de altura, necesita tener la altura de div principal establecida.

En su caso, el elemento que es el elemento primario de #center debe tener cierta altura para que su CSS funcione como se espera.

Fuente

2011-07-29 21:19:42 Sinan

Por lo general, un div es solo tan alto como su contenido, independientemente de la altura que especifique. Necesitas anidarlos. Para evitar complicaciones, establezco una altura máxima y uso un posicionamiento absoluto para los elementos que quiero que estén en la parte inferior del contenedor.

Como un enfoque de diseño, debe asegurarse de que el contenido del div sea la altura que desea. El relleno puede ser una herramienta muy útil. Puedes poner un relleno ridículo y ocultar el desbordamiento. Luego se cerrará a su altura máxima.

Fuente

2011-07-29 21:21:53

configuración altura 100% no funciona

Respuesta

Cuestiones relacionadas