min-altura: 100%; altura: 100%; no funciona

No puedo entender lo que está mal con mis estilos.
Espero que alguien pueda ayudarme con esto.
Código ejemplo:min-altura: 100%; altura: 100%; no funciona

<style type="text/css"> 
.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; min-height:250px; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
<div class="maindiv"> 
    <div class="left_inner">Left Block content</div> 
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

La forma en que debe ser es como en Opera Browser (ver imagen): Sample image

Fuente

2012-01-09 wzazza

¿Tiene un tipo de documento? –

@MrLister: Si no lo hace, puede consultar esto: http://www.w3schools.com/tags/tag_doctype.asp –

sí, tengo doctype: – wzazza

El Cómo

http://jsfiddle.net/L9GEa/

El por qué

Uno podría suponer intuitivamente (como una vez lo hice) que el elemento html ya tiene una altura determinada, pero no es así (al menos en este contexto). Afortunadamente (o por diseño), este elemento tiene la propiedad única de que su altura se puede determinar cuando se le asigna un alto porcentual. Ese es el concepto esencial porque para calcular (determinar) la altura de cualquier otro elemento al que se le asigna un porcentaje de altura, también debe poder determinar la altura de su padre.
Cualquier persona que haya trabajado con CSS y el DOM lo suficientemente probable como para decirle odio flotadores. Esto se debe a que extrae el elemento del flujo, lo que requiere trabajo y pensamiento adicionales para hacer malabarismos con los efectos. En su lugar, use display: inline-block; vertical-align: top; con la única advertencia de que tendrá que agregar comentarios html alrededor de cualquier espacio en blanco entre esos elementos.

El CSS

.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px;min-height:250px; 
    /*changes*/ 
    height:100%; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
    /*changes*/ 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
    /*changes*/ 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
/*changes*/ 
html, 
body{ 
    height:100%; 
}

El HTML

<div class="maindiv"> 
    <div class="left_inner">Left Block content</div><!-- 
    --><div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

Fuente

2013-09-14 05:40:02

Esta solución funcionó para mí, así que la marqué como la mejor respuesta. Gracias. – wzazza

En mi experiencia soltar los comentarios de html y establecer el tamaño de fuente a 0, en sus contenedores/elementos internos establecer el tamaño de fuente y uso de desaprobar mostrar en línea bloque .. Incriture el tamaño de fuente del cuerpo, por ejemplo. 1rem – Ghost1

Prueba esto:

<style type="text/css"> 
.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; height: auto; min-height:250px; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; height: 100%; background:#00CC33; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
<div class="maindiv"> 
    <div class="left_inner">Left Block content</div> 
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

La mayor parte del tiempo que tiene para aplique una altura de auto o 100% al DIV padre.

Fuente

2012-01-09 14:59:45

también funciona con altura de píxel para el div externo. – danijar

Esto no funcionó. – wzazza

@sharethis: No puede lograr una REGLA CSS al 100% si aplica el valor en una base de píxeles. –

añadir

html, 
body { 
    height:100% 
}

en la parte superior de la CSS, que funciona para mí

EDIT: mi prueba:

<!DOCTYPE html> 
<html> 

<head> 
<style> 
html, 
body { 
height:100%; 
} 

.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; height:100%; 
position:relative; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
position:relative; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
</head> 
<body> 
<div class="maindiv"> 
<div class="left_inner">Left Block content</div> 
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div> 
</body> 
</html>

Fuente

2012-04-04 03:09:29 Michel

min-altura: 100%; altura: 100%; no funciona

Respuesta

Cuestiones relacionadas