Come è possibile ottenere il div nav in modo che si espanda verso il basso o che l'altezza sia uguale a quella del genitore (contenitore)?Come ottenere un div per ridimensionare la sua altezza per adattarsi al contenitore?

<!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

modo semplice

È possibile raggiungere questo obiettivo con l'impostazione sia le top e bottom attributi del nav per 0 e il position: absolute. Imposta il contenitore su position: relative.

See how this is done

In fondo a questo articolo, v'è un collegamento a Dean Edwards' IE7 (e IE8) libreria js che si dovrebbe includere per i visitatori di IE6. È una libreria JS che in realtà rende IE6 un comportamento come IE7 (o 8) quando lo si include. Dolce! ... naturalmente ci sono dei bug, ma almeno sai come gestirli.

Dean Edwards' IE7 and 8 JS libraries

Modern Way (Flexbox)

IE11 + e tutti i browser moderni supportano FlexBox.

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

.child { 
    flex-grow: 1; 
}

fonte

2009-08-05 00:52:15 kmiyashiro

Devi anche impostare 'position: absolute' sul nav stesso. Questo è menzionato nell'articolo, ma ho pensato che sarebbe stato bello menzionarlo qui. – Muhd

@Muhd risposta aggiornata – kmiyashiro

Probabilmente sta andando a voler utilizzare la seguente dichiarazione:

height: 100%;

Questo imposterà l'altezza del div al 100% della sua altezza contenitori, che renderà più riempire il div genitore .

fonte

2009-08-04 23:08:54

si avrebbe possibbly necessario specificare l'altezza del contenitore e quindi impostare l'altezza del NAV al 100%.

Edit: ha avuto un rapido sguardo intorno e sembra che la proprietà altezza si applica alla quota genitori in modo sarete davvero necessario impostare l'altezza contenitori.

NB: impostare l'altezza dell'elemento corpo al 100% in scala solo fino all'altezza della finestra del browser. Qualsiasi contenuto che goeds su una pagina non avrà lo stesso sfondo, ecc

fonte

2009-08-04 23:09:06 schubySteve

Questo funziona, ma non volevo un'altezza fissa per il contenitore. ; | – ParoX

Per quanto riguarda NB: non altezza minima: 100%; Aiuta questo – ParoX

@Brian, potresti provarlo. – schubySteve

Purtroppo, non esiste un modo infallibile per ottenere questo risultato. Un blocco si espanderà solo all'altezza del suo contenitore se non è floatato. I blocchi mobili vengono considerati al di fuori del flusso del documento.

Un modo per eseguire le seguenti operazioni senza usare JavaScript è tramite una tecnica chiamata Faux-Columns.

Fondamentalmente comporta l'applicazione di un background-image agli elementi padre degli elementi flottati che fa credere che i due elementi abbiano la stessa altezza.

Maggiori informazioni sono disponibili presso:

A List Apart: Articles: Faux Columns

fonte

2009-08-05 00:54:07

Questo è quello che ho ora, sto cercando di farla finita. – ParoX

Un altro metodo semplice è lì. Non è necessario codificare più in CSS.Includendo semplicemente uno script java e inserendo il div "id" all'interno dello script, è possibile ottenere un'altezza uguale delle colonne in modo da avere l'altezza adatta al contenitore. Funziona nei principali browser.

Source Code:

<!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>

Si può includere qualsiasi non di div in questo script.

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

modificare nella riga sopra la sua abbastanza.

Prova questo.

fonte

2009-08-06 15:44:46

Ho avuto lo stesso problema, l'ho risolto utilizzando un javascript.

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

fonte

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>

fonte

2013-08-16 12:28:21 Lasithds

-1 Il tuo codice potrebbe rispondere perfettamente a questa domanda, ma sono troppo pigro per copiarlo in uno spazio in cui posso vederlo. Quindi, [fiddle] (http://www.jsfiddle.com/) la tua risposta e descrivi cosa fa. – bishop

Se il trucco usando position:absolute, position:relative e top/left/bottom/right: 0px non è appropriato per la situazione, si potrebbe provare:

#nav { 
    height: inherit; 
}

questo ha lavorato su una delle nostre pagine, anche se non sono sicuro esattamente quali altre condizioni erano necessarie per il successo!

fonte

2013-11-25 16:28:17 joeytwiddle

Come ottenere un div per ridimensionare la sua altezza per adattarsi al contenitore?

risposta

modo semplice

Modern Way (Flexbox)

Problemi correlati