¿Cómo hacer que la altura del div interno sea igual a la altura del div principal si el div principal tiene "min-height"?

¿Por qué en el siguiente ejemplo la altura del interior div no es como el contenedor div?¿Cómo hacer que la altura del div interno sea igual a la altura del div principal si el div principal tiene "min-height"?

Live demo here.

HTML:

<div class="wrapper"> 
    <div class="inner">Hello</div> 
    <div class="inner">Peace</div> 
</div>

CSS:

.wrapper { 
    background-color: #000; 
    min-height: 100px; 
} 
.inner { 
    display: inline-block; 
    background-color: #777; 
    height: 100%; 
}

Si cambio min-height: 100px; a height: 100px;, a continuación, se ve bien. Pero, en mi caso, necesito min-height.

Fuente

2011-05-04 Misha Moroshko

Si la altura de la envoltura no es dinámica, entonces ¿por qué es necesario utilizar% cuando el interno podría simplemente tener la misma altura que has especificado para el contenedor. Además, si inner fuera 100% alto, ¿cómo funcionaría tener dos de ellos dentro del wrapper? – Marty

gracias por ese sitio por cierto Misha, que será muy útil :) – iain

@iain: Bienvenido al club :) –

creo que esta es la salida que desea: http://jsfiddle.net/xhp7x/

.wrapper { 
    display: table; 
    background-color: #000; 
    height: 100px; 
    width: 100%; 
} 
.wrapper2 { 
    height: 100%; 
    display: table-row 
} 
.inner { 
    height: 100%; 
    display: inline-block; 
    background-color: #777; 
    margin-right: 10px; 
    vertical-align: top; 
}

tuvo que añadir una segunda wrapper2 DIV.

Probado en Chrome y Firefox.

Fuente

2011-05-04 07:01:56 ariel

En su ejemplo, el contenedor no tiene 'min-height'. –

pero se comporta así. el texto corto mantiene la envoltura a 100 px, y el texto alto lo extiende – ariel

OK ... Pero la altura de las envolturas internas es menor que la altura de la envoltura. Quiero que sean iguales. –

Desea especificar ambos, CSS height no es lo mismo que min-height. Desea especificar ambos height y min-height.

height = Cuando se utiliza como %, este es un porcentaje de la altura de la ventana
min-height = mientras arrastra la ventana más pequeña, el DIV con un %height va a seguir reduciendo hasta que llega la min-height
max-height = mientras arrastra la ventana más grande, el DIV con un %height seguirá aumentando hasta que llegue al max-height

http://jsfiddle.net/gpeKW/2/ He añadido una muestra aquí con fronteras.

Leve cambio a la respuesta de tu comentario, ya que estás más o menos en lo correcto desde tu CSS original.

El siguiente HTML tendrá una altura div mínima de 100 px. A medida que aumenta el tamaño del DIV interno, el contenedor se expandirá automáticamente. Lo he demostrado agregando un atributo style al primer class interno.

<html> 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
     .wrapper 
     { 
      background-color: #000; 
      min-height:100px; 
     } 
     .inner 
     { 
      display: inline-block; 
      background-color: #777; 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="inner" style="height:200px">test</div> 
    <div class="inner">Peace</div> 
    </div> 
</body> 
</html>

Fuente

2011-05-04 07:05:59 iain

he intentado pero si pones la altura del div dont crecer si el contenido si es mayor que 100 px, supongo que es un requisito previo – ariel

el ejemplo no es una buena – sandeep

En su ejemplo no hay 'min-altura característica en el div contenedor . –

Yo sé una manera de ajustar la altura div niño lo mismo que su altura div padre es utilizar relativa para el padre y la posición absoluta para el niño.

.wrapper { 
    background-color: #000; 
    min-height: 100px; 
    position: relative; 
} 
.inner { 
    display: inline-block; 
    background-color: #777; 
    position: absolute; 
    height: 100%; 
}

Pero de esta manera va a causar algún problema, hay que ajustar el elemento secundario de modo que se mostrará correctamente

P/s: ¿Por qué no lo ajusta a la misma altura que su altura de los padres? Quiero decir, el 100% no es x% ... solo estoy pensando ...

De todos modos, feliz de codificación; no)

Fuente

2011-05-04 07:19:00

hm .. raro, que no se expandió la altura de un elemento de alta http://jsfiddle.net/kBRVH/ – ariel

http://jsfiddle.net/kBRVH/3/ como se puede ver, el primero con el texto en negro, si se inserta más líneas, se desborde el div exterior, debido a que el div exterior es 100px de alto y esta altura no aumentará cuando su niño con posición absoluta aumenta la altura. Por otro lado, el segundo con texto blanco, inserte más líneas y verá;) –

Algunas propiedades de CSS heredan el valor de la matriz de forma automática, algunos lo hacen. La altura mínima debe indicarse explícitamente cuando usted quiere que heredan valor del padre:

min-height: inherit;

Fuente

2012-03-30 09:11:11 mystrdat

¿Cómo hacer que la altura del div interno sea igual a la altura del div principal si el div principal tiene "min-height"?

Respuesta

Cuestiones relacionadas