¿Cómo puedo obtener el div nav para ampliar o tener la altura igual que su div principal (contenedor)?¿Cómo obtener un div para cambiar el tamaño de su altura para que se ajuste al contenedor?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<title></title> 
<style type="text/css"> 
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */ 
#container { 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid black; 
    overflow: auto; 
    width: 800px; 
} 
#nav { 
    width: 19%; 
    border: 1px solid green; 
    float:left; 
} 
#content { 
    width: 79%; 
    border: 1px solid red; 
    float:right; 
} 
</style> 


<div id=container> 
    <div id=nav> 
     <ul> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
     </ul> 
    </div> 
    <div id=content> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum consequat ligula vitae posuere. Mauris dolor quam, consequat vel condimentum eget, aliquet sit amet sem. Nulla in lectus ac felis ultrices dignissim quis ac orci. Nam non tellus eget metus sollicitudin venenatis sit amet at dui. Quisque malesuada feugiat tellus, at semper eros mollis sed. In luctus tellus in magna condimentum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel dui est. Aliquam vitae condimentum dui. Praesent vel mi at odio blandit pellentesque. Proin felis massa, vestibulum a hendrerit ut, imperdiet in nulla. Sed aliquam, dolor id congue porttitor, mauris turpis congue felis, vel luctus ligula libero in arcu. Pellentesque egestas blandit turpis ac aliquet. Sed sit amet orci non turpis feugiat euismod. In elementum tristique tortor ac semper.</p> 
    </div> 
</div> 

</body> 
</html>

2009-08-04 ParoX

manera sencilla

Todo esto es posible con la configuración tanto de los topbottom y atributos de navegación para 0 y la position: absolute. Establezca el contenedor en position: relative.

See how this is done

En la parte inferior de dicho artículo, hay un enlace a Dean Edwards IE7 (e IE8) biblioteca de JS que usted debe incluir para los visitantes de IE6. Es una biblioteca JS que realmente hace que IE6 se comporte como IE7 (u 8) cuando lo incluye. ¡Dulce! ... por supuesto, hay errores con eso, pero al menos sabes cómo tratar con ellos.

Dean Edwards' IE7 and 8 JS libraries

Modern Way (Flexbox)

EI11 + y todos los navegadores modernos soportan FlexBox.

.container { 
    display: flex; 
    flex-direction: column; 
} 

.child { 
    flex-grow: 1; 
}

Fuente

2009-08-05 00:52:15 kmiyashiro

También debe establecer 'position: absolute' en el navegador. Eso se menciona en el artículo, pero pensé que sería bueno mencionarlo aquí. – Muhd

@Muhd respuesta actualizada – kmiyashiro

Probablemente va a querer utilizar la siguiente declaración:

height: 100%;

Esto fijará la altura de la div a 100% de su altura contenedores, lo que hará que se llene el div padre .

Fuente

2009-08-04 23:08:54

le possibbly necesario especificar la altura del recipiente y luego ajustar la altura de la navegación por el 100%.

Editar: tuvo un rápido vistazo alrededor y parece que la propiedad se aplica a la altura de la altura de los padres por lo que de hecho se necesita para establecer la altura contenedores.

NB: ajuste de la altura del elemento del cuerpo al 100% sólo se escala para que la altura de la ventana del navegador. Cualquier contenido que goeds más de una página no va a tener el mismo fondo etc.

Fuente

2009-08-04 23:09:06 schubySteve

Esto funciona, pero no quería una altura fija para el contenedor. ; | – ParoX

En lo que respecta a NB: no min-height: 100%; ayuda esto – ParoX

@Brian, podría intentarlo. – schubySteve

Desafortunadamente, no hay una forma infalible de lograr esto. Un bloque solo se expandirá a la altura de su contenedor si no está flotante. Los bloques flotantes se consideran fuera del flujo de documentos.

Una forma de hacer lo siguiente sin utilizar JavaScript es a través de una técnica llamada Faux-Columns.

Básicamente consiste en aplicar un background-image a los elementos primarios de los elementos flotantes, lo que le hace creer que los dos elementos tienen la misma altura.

Más información disponible en:

A List Apart: Articles: Faux Columns

Fuente

2009-08-05 00:54:07

Esto es lo que tengo ahora, estoy tratando de eliminarlo. – ParoX

Otro método simple es no. No necesita codificar más en CSS.Simplemente incluyendo un script java e ingresando el "id" de div dentro del script, puede obtener la misma altura de columnas para que pueda tener la altura adecuada para el contenedor. Funciona en los principales navegadores.

Código Fuente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<title></title> 
<style type="text/css"> 
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */ 
#container { 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid black; 
    overflow: auto; 
    width: 800px;  
} 
#nav { 
    width: 19%; 
    border: 1px solid green; 
    float:left; 
} 
#content { 
    width: 79%; 
    border: 1px solid red; 
    float:right; 
} 
</style> 

<script language="javascript"> 
var ddequalcolumns=new Object() 
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists: 
ddequalcolumns.columnswatch=["nav", "content"] 

ddequalcolumns.setHeights=function(reset){ 
var tallest=0 
var resetit=(typeof reset=="string")? true : false 
for (var i=0; i<this.columnswatch.length; i++){ 
if (document.getElementById(this.columnswatch[i])!=null){ 
if (resetit) 
document.getElementById(this.columnswatch[i]).style.height="auto" 
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest) 
tallest=document.getElementById(this.columnswatch[i]).offsetHeight 
} 
} 
if (tallest>0){ 
for (var i=0; i<this.columnswatch.length; i++){ 
if (document.getElementById(this.columnswatch[i])!=null) 
document.getElementById(this.columnswatch[i]).style.height=tallest+"px" 
} 
} 
} 

ddequalcolumns.resetHeights=function(){ 
this.setHeights("reset") 
} 

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload) 
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype 
if (target.addEventListener) 
target.addEventListener(tasktype, functionref, false) 
else if (target.attachEvent) 
target.attachEvent(tasktype, functionref) 
} 

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load") 
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize") 


</script> 

<div id=container> 
    <div id=nav> 
     <ul> 
       <li>Menu</li> 
       <li>Menu</li> 
       <li>Menu</li> 
       <li>Menu</li> 
       <li>Menu</li> 
     </ul> 
    </div> 
    <div id=content> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum consequat ligula vitae posuere. Mauris dolor quam, consequat vel condimentum eget, aliquet sit amet sem. Nulla in lectus ac felis ultrices dignissim quis ac orci. Nam non tellus eget metus sollicitudin venenatis sit amet at dui. Quisque malesuada feugiat tellus, at semper eros mollis sed. In luctus tellus in magna condimentum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel dui est. Aliquam vitae condimentum dui. Praesent vel mi at odio blandit pellentesque. Proin felis massa, vestibulum a hendrerit ut, imperdiet in nulla. Sed aliquam, dolor id congue porttitor, mauris turpis congue felis, vel luctus ligula libero in arcu. Pellentesque egestas blandit turpis ac aliquet. Sed sit amet orci non turpis feugiat euismod. In elementum tristique tortor ac semper.</p> 
    </div> 
</div> 

</body> 
</html>

Usted puede incluir sin cualquiera de divs en este guión.

ddequalcolumns.columnswatch = [ "nav", "contenido"]

modificar en la línea por encima de su suficiente.

Pruebe esto.

Fuente

2009-08-06 15:44:46

Tuve el mismo problema, lo resolví usando algunos javascript.

<script type="text/javascript"> 
var theHeight = $("#PrimaryContent").height() + 100; 
$('#SecondaryContent').height(theHeight); 
</script>

Fuente

2012-07-10 08:19:11

-2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#top, #bottom { 
    height: 100px; 
    width: 100%; 
    position: relative; 
} 
#container { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
} 
#container .left { 
    height: 550px; 
    width: 55%; 
    position: relative; 
    float: left; 
    background-color: #3399FF; 
} 
#container .right { 
    height: 100%; 
    position: absolute; 
    right: 0; 
    left: 55%; 
    bottom: 0px; 
    top: 0px; 
    background-color: #3366CC; 
} 
</style> 
</head> 

<body> 
<div id="top"></div> 
<div id="container"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 
<div id="bottom"></div> 
</body> 
</html>

Fuente

2013-08-16 12:28:21 Lasithds

-1 Tu código podría responder perfectamente a esta pregunta, pero soy demasiado flojo para copiarlo en un espacio donde pueda verlo. Entonces, [fiddle] (http://www.jsfiddle.com/) tu respuesta y describe lo que hace. – bishop

Si el truco utilizando position:absolute, position:relative y top/left/bottom/right: 0px no es apropiado para su situación, usted podría intentar:

#nav { 
    height: inherit; 
}

Esto funcionó en una de nuestras páginas, aunque no estoy seguro exactamente qué otras condiciones se necesitaban para tener éxito!

Fuente

2013-11-25 16:28:17 joeytwiddle

¿Cómo obtener un div para cambiar el tamaño de su altura para que se ajuste al contenedor?

Respuesta

manera sencilla

Modern Way (Flexbox)

Cuestiones relacionadas