obtenir la colonne de gauche pour étirer tout le chemin vers le bas

Je me suis cogné la tête depuis presque 3 jours maintenant. J'ai lu des tas d'articles sur 3col stretch, et en définissant clairement et en utilisant la position absolue et relative (plusieurs contradictoires)obtenir la colonne de gauche pour étirer tout le chemin vers le bas

Je veux, ce que je considère, une mise en page très simple. Je veux un div de navigation sur la gauche. Deux divs sur la gauche et un pied de page. Si j'utilisais des tables, il serait quelque chose comme ceci:

<table border="1"> 
<tr> 
    <td rowspan="2"> 
     left nav. 
    </td> 
    <td>right 1</td> 
</tr> 
<tr> 
    <td>right 2</td> 
</tr> 
<tr> 
    <td colspan="2">footer</td> 
</tr>

Cependant je ne peux pas obtenir le div gauche pour étirer tout le chemin vers le bas. Voici le plus proche, je suis venu à une solution. Ce qui semble fonctionner dans IE7 mais pas dans Opera ou Firefox. Je crois que cela est dû au fait que le flottant n'augmente pas la longueur de la div parente, donc la div à gauche pense que son parent est plus petit que ce qu'il est.

Toute aide serait géniale.

<html> 
<head> 
<style type="text/css"> 
body 
{ 
height:100; 
} 



.main{ 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    width: 100%; 
} 


.leftDiv 
{ 

    position: relative; 
    float: left; 
    width: 18%; 
    height: 100%; 
    background-color: aqua; 
} 

.topRight 
{ 
    position: relative; 
    float: right; 
    width: 80%; 
    background-color: green; 
} 
.bottomRight 
{ 
    position: relative; 
    float: right; 
    width: 80%; 
    background-color: red; 
} 

.footer 
{ 
    width: 100%; 
    float: right; 
    background: blue; 
    position: relative; 
} 

</style> 
</head> 

<body> 

<div class="main"> 

    <div class="leftDiv">This should Stretch all the way down the left side</div> 
    <div class="topRight">This should be over to the right at the top</div> 
    <div class="bottomRight">This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/> 
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/> 
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/> 
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/> 
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/> 
lotst of text here<br/> </div> 

    <div class="footer">footer text. This should be at the bottom of the screen under the main content.<br/></div> 




</div> 

</body> 
</html>

Source

2010-12-09 AidanO

J'ai pris la liberté de le nettoyer un peu. J'ai aussi mis votre pied de page div en dehors de votre div principal.

Dans cette disposition, le contenu de la div principale détermine la hauteur. J'ai donné à tout le contenu une marge de gauche de 20% et positionné absolu le div gauche sur cette marge. Puisque la div principale est aussi le parent de la div gauche, en réglant la hauteur de la div gauche à 100%, elle s'étend à la hauteur de la div principale (qui à sa place avait la hauteur du contenu).

Une autre option (un peu plus propre) serait de définir le bottom: 0px au lieu du height: 100% sur la div gauche. Il alignerait le fond au fond du conteneur (div principal) mais je pense que cela ne fonctionne pas dans IE6.

.topRight, .bottomRight { 
    margin: 0px 0px 0px 20%; 
} 

.main { 
    height: 100%; 
    position: relative; 
} 


.leftDiv {   
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 18%; 
    bottom: 0px; 
    background-color: aqua; 
} 

.topRight { 
    background-color: green; 
} 

.bottomRight { 
    background-color: red; 
} 

.footer { 
    background: blue; 
}

http://jsfiddle.net/Z44HK/

PS: J'espère que ces </br> balises ne sont utilisées que pour le test car ils ont l'air réel laid. CSS a été inventé pour éliminer ce genre de balises de présentation en HTML.

Source

2010-12-09 17:42:54 Jan

Merci Jan, je suis en train de revoir ça maintenant pour voir si je peux le faire fonctionner. J'aime jsfiddle aussi, doit jouer avec ça. :) – AidanO

Hey Jan, Bien que cette réponse fonctionne dans jsfiddle, elle ne fonctionne pas dans les vrais navigateurs. Je l'ai essayé dans Opera, Firefox et IE7. En ajoutant un "Height: 100%" à gauche, il fonctionnera dans IE7 mais pas dans les deux autres navigateurs :( – AidanO

Cet exemple fonctionne sur Chrome, Firefox IE8 et IE7, au moins sur ma machine. www.mediafire.com/?c87m9ec1c8dd12h – Jan

Qu'est-ce que cela signifie?

body 
{ 
height:100; 
}

Je pense que vous voulez dire:

html, body 
{ 
    height: 100%; 
}

Le navigateur ne peut pas dire ce que 100 est. C'est comme acheter du riz. Combien coûte 100 riz? 100 grains? Livres sterling? Je ne sais pas. Rappelez-vous vos unités;)

Source

2010-12-09 17:31:57 Blender

C'est un bon point Blender, mais est-ce une réponse? – AidanO

obtenir la colonne de gauche pour étirer tout le chemin vers le bas

Répondre

Questions connexes