css/header poussant deux colonnes étirées (absolument positionnées) vers le bas

Après quelques heures de bidouillage, j'ai décidé de tenter ma chance ici. Je travaille sur une conception de site Web qui a une configuration assez basique, elle consiste en un en-tête et deux colonnes, qui ont leurs propres barres de défilement. Cela nécessite que leur position soit absolue, et que la valeur maximale soit définie, et que la valeur du bas soit 0px. Bien sûr, cela les empêche d'être dans le flux de documents normal, et donc ils ne peuvent pas être poussés vers le bas par la colonne d'en-tête.css/header poussant deux colonnes étirées (absolument positionnées) vers le bas

Toutes les idées sur la façon d'y parvenir avec css seulement sont les bienvenues, il semble si simple!

Cordialement, Thijs.

code:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Testcase</title> 

<style type="text/css"> 

body { 
    margin: 0; 
    padding: 0; 
} 

#header { 
    background-color: #c8ffff; 

} 

#lr_container { 
    position: absolute; 
    top: 250px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
} 

#leftcol { 
    background-color: #ffdcff; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    width: 200px; 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

#rightcol { 
    background-color: #ffffd1; 
    position: absolute; 
    top: 0px; 
    left: 200px; 
    bottom: 0px; 
    right: 0px; 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 



</style> 

</head> 

<body> 

<div id="header"> 
variable amount of content, needs to stretch in height and push the pink and yellow kids downwards<br/><br/>!<br/>!<br/><br/>!<br/>!<br/><br/>!<br/>!<br/><br/>!<br/>! 
</div> 

<div id="lr_container"> 

    <div id="leftcol"> 

    has a fixed width, stretches to the bottom of window<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 
    aa<br/><br/> 

    </div> 

    <div id="rightcol"> 
    stretches to the right and stretches to the bottom of window<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    bb<br/><br/> 
    </div> 

</div> 


</body> 
</html>

http://www.thingsinprogress.net/test.html

Source

2009-09-16 Anonymous

Voici comment je le résoudre:

#leftcol { 
    background-color:#FFDCFF; 
    float:left; 
    height:200px; 
    left:0; 
    overflow-x:hidden; 
    overflow-y:scroll; 
    position:relative; 
    top:0; 
} 
#rightcol { 
    background-color:#FFFFD1; 
    float:left; 
    height:200px; 
    left:200px; 
    overflow-x:hidden; 
    overflow-y:scroll; 
    position:relative; 
    right:0; 
    top:0; 
}

Maintenant les deux colonnes, LeftCol et rightcol, seront poussés vers le bas si le contenu se développe Vous pouvez effacer le flotteur avec clear: both;

<div id="leftcol">col1</div> 
<div id="rightcol">col2</div> 

<div style="clear: both;"></div> 
<div id="bottom">bottom</div>

Espérons que ça aide!

Source

2009-09-16 20:22:38 miron

Salut, Merci pour votre réponse, la chose est cependant que les colonnes doivent s'étirer vers le bas de la fenêtre et ont leurs propres barres de défilement individuelles, de sorte qu'ils ne peuvent que défiler individuellement, et non la page dans son ensemble. Par conséquent, ils ne peuvent pas avoir leur attribut de hauteur, je pense. Avez-vous une autre suggestion? Merci beaucoup! –

css/header poussant deux colonnes étirées (absolument positionnées) vers le bas

Répondre

Questions connexes