Comment puis-je obtenir le div nav pour avoir se dilater vers le bas ou avoir la même hauteur que son div div (conteneur)?Comment obtenir un div pour redimensionner sa hauteur pour s'adapter à un conteneur?

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

Way Simple

Vous pouvez y parvenir avec les deux top réglage et bottom attributs de la navigation à 0 et position: absolute. Définissez le conteneur sur position: relative.

See how this is done

Au bas de cet article, il y a un lien vers IE7 de Dean Edwards (et IE8) la bibliothèque que vous devez inclure pour les visiteurs IE6. C'est une bibliothèque JS qui fait IE6 se comporter comme IE7 (ou 8) lorsque vous l'incluez. Doux! ... bien sûr, il y a des bugs avec, mais au moins vous savez comment les gérer.

Dean Edwards' IE7 and 8 JS libraries

Modern Way (Flexbox)

IE11 + et tous les navigateurs modernes prennent en charge FlexBox.

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

.child { 
    flex-grow: 1; 
}

Source

2009-08-05 00:52:15 kmiyashiro

Vous devez également définir 'position: absolute' sur la navigation elle-même. C'est mentionné dans l'article, mais j'ai pensé qu'il serait bon de le mentionner ici. – Muhd

@Muhd mis à jour la réponse – kmiyashiro

Vous allez probablement vouloir utiliser la déclaration suivante:

height: 100%;

Cela va régler la hauteur de la div à 100% de sa hauteur de conteneurs, ce qui en fera remplir le div parent .

Source

2009-08-04 23:08:54

vous devez éventuellement spécifier la hauteur du conteneur, puis définir la hauteur de navigation à 100%. Edit: jetez un coup d'œil rapide et il semble que la propriété height s'applique à la hauteur des parents, vous devrez donc définir la hauteur des conteneurs. NB: le réglage de la hauteur de l'élément body à 100% ne fait que l'ajuster à la hauteur de la fenêtre du navigateur. Tout contenu qui goeds sur une page ne sera pas le même arrière-plan, etc.

Source

2009-08-04 23:09:06 schubySteve

Cela fonctionne, mais je ne voulais pas d'une hauteur fixe pour le conteneur. | – ParoX

En ce qui concerne NB: ne serait pas min-hauteur: 100%; aider ce – ParoX

@Brian, pourrait faire l'essai. – schubySteve

Malheureusement, il n'existe aucun moyen infaillible pour y parvenir. Un bloc ne s'élargira que jusqu'à la hauteur de son conteneur s'il n'est pas flottant. Les blocs flottants sont considérés en dehors du flux de documents.

Une façon de faire ce qui suit sans utiliser JavaScript est via une technique appelée Faux-Columns.

Il consiste essentiellement à appliquer un background-image aux éléments parents des éléments flottants, ce qui donne à penser que les deux éléments ont la même hauteur.

Plus d'informations:

A List Apart: Articles: Faux Columns

Source

2009-08-05 00:54:07

C'est ce que j'ai maintenant, j'essaie de le faire disparaître. – ParoX

Un autre méthode simple est là. Vous n'avez pas besoin de coder plus en CSS.Juste en incluant un script java et en entrant le div "id" dans le script, vous pouvez obtenir une hauteur égale de colonnes afin que vous puissiez avoir la hauteur adaptée au conteneur. Cela fonctionne dans les principaux navigateurs.

Code Source:

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

Vous pouvez inclure tout pas de divs dans ce script.

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

modifier dans la ligne au-dessus de son suffisant.

Essayez ceci.

Source

2009-08-06 15:44:46

J'ai eu le même problème, je l'ai résolu en utilisant du javascript.

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

Source

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>

Source

2013-08-16 12:28:21 Lasithds

-1 Votre code pourrait parfaitement répondre à cette question, mais je suis trop paresseux pour le copier dans un espace où je peux le voir. Alors, [fiddle] (http://www.jsfiddle.com/) votre réponse et décrivez ce qu'elle fait. – bishop

Si l'astuce en utilisant position:absolute, position:relative et top/left/bottom/right: 0px ne convient pas à votre situation, vous pouvez essayer:

#nav { 
    height: inherit; 
}

Cela a fonctionné sur une de nos pages, bien que je ne suis pas sûr exactement quelles autres conditions étaient nécessaires pour qu'elle réussisse!

Source

2013-11-25 16:28:17 joeytwiddle

Comment obtenir un div pour redimensionner sa hauteur pour s'adapter à un conteneur?

Répondre

Way Simple

Modern Way (Flexbox)

Questions connexes