Hauteur personnalisée avec scroll entre 2 divs

Bonjour,

J'ai une sidebar avec plusieurs niveaux de rubriques (voir l'image)
Le problème c'est dans la zone où j'afficherai les amis, j'aimerais que la hauteur du div qui contiendrais les amis soit personnalisée suivant la résolution de l'écran.

La zone de recherche d'amis est en position absolute avec un bottom 0.
La zone de l'affichage des amis pourrais se scroller.

Voilà, c'est un peu compliqué à comprendre mais c'est le même principe que le nouveau format de Facebook avec la sidebar.



Merci d'avance
Modifié par nico44530 (13 Feb 2014 - 17:22)

Bonjour,

Tu aurais peut-être un bout de code à montrer?

Voici le code de la sidebar :

<div class="barItem">
			<a href="<?php echo $data['user_pseudo']; ?>" class="barLink"><?php if(file_exists($avatar_membre)){ ?> 
				<img src="users/upload/avatars/<?php echo $data['user_id']; ?>-mini.jpg" height="50" width="50" alt="" class="barAvatar" /><?php } else { ?><img src="<?php echo $avatar_defaut; ?>" height="50" width="50" alt="" class="barAvatar" /><?php } ?> 
				<div class="barInline">
					<div class="barName"><?php echo ucfirst($data['user_prenom']); ?><br /><?php echo ucfirst($data['user_nom']); ?></div>
					<?php if($data['user_statut'] == 'administrateur'){ ?><span class="adminClass" title="Vous êtes administrateur"></span><?php } ?> 
				</div>
			</a>
		</div>
		<div class="barSep"></div>
		<div class="barItem">
			<a href="home" class="barLink">
				<img src="users/img/64/world.png" height="32" width="32" alt="" class="barAvatar" />
				<div class="barInline">
					<div class="barName">Fil d'actualité</div>
				</div>
			</a>
		</div>
		<div class="barItem">
			<a href="photos" class="barLink">
				<img src="users/img/64/photo.png" height="32" width="32" alt="" class="barAvatar" />
				<div class="barInline">
					<div class="barName">Photos</div>
				</div>
			</a>
		</div>
		<div class="barItem">
			<a href="messages" class="barLink">
				<img src="users/img/64/mail.png" height="32" width="32" alt="" class="barAvatar" />
				<div class="barInline">
					<div class="barName">Messages</div>
				</div>
			</a>
		</div>
		<div class="barPlus">
			<div class="barItem">
				<a href="friends" class="barLink">
					<img src="users/img/64/users.png" height="32" width="32" alt="" class="barAvatar" />
					<div class="barInline">
						<div class="barName">Mes amis</div>
					</div>
				</a>
			</div>
			<div class="barItem">
				<a href="events" class="barLink">
					<img src="users/img/64/calendar_date.png" height="32" width="32" alt="" class="barAvatar" />
					<div class="barInline">
						<div class="barName">Évènements</div>
					</div>
				</a>
			</div>
		</div>
		<div class="barSep"></div>
		<div class="barItem">
			<a href="#" class="barLink" id="barSlide_Down">
				<img src="users/img/64/down_arrow.png" height="32" width="32" alt="" class="barAvatar" id="imgSlide_DownUp" />
				<div class="barInline">
					<div class="barName" id="barSlide_PlusMoins">Afficher plus...</div>
				</div>
			</a>
		</div>
		<div class="barSep"></div>
		<div class="barFriends">
			<p>Aucun ami pour l'instant</p>
		</div>
		<script src="../js/scrollbar.min.js"></script>
		<div class="barSearch">
			<input type="text" placeholder="Rechercher des amis..." class="barSearchInput" />
			<a href="#" class="barOptions"></a>
			<a href="#" class="barSlide"></a>
		</div>

Et voici le code css :

#sidebar {background:url(../users/img/bgSidebar.png) repeat-y;position:fixed;height:100%;width:180px;padding:10px;}/*background: url(../users/img/bgSidebar.png) -145px 0 repeat-y;*/
#sidebar .barItem {margin:10px 0;}
#sidebar .barItem:first-child {margin:0;}
#sidebar .barItem:last-child {margin-bottom:0;}
#sidebar .barLink {text-decoration:none;display:block;color:#ccc;border-radius:30px 5px 5px 30px;}
#sidebar .barLink:hover {background-color:#232323;border-radius:30px 5px 5px 30px;color:#fff;}
#sidebar .barAvatar {border-radius:50%;vertical-align:middle;margin-right:10px;}
#sidebar .barName {text-shadow:1px 1px #000;}
#sidebar .adminClass {background-image:url(../users/img/sprite.png);background-repeat:no-repeat;background-position:0 -40px;height:32px;width:32px;position:absolute;right:15px;top:20px;}
#sidebar .barPoint {font-size:12px;text-shadow:1px 1px #000;}
#sidebar .barInline {display:inline-block;vertical-align:middle;}
#sidebar .barSep {content:"";background:url(../users/img/sepSidebar.png) repeat-x;margin:10px 0;width:200px;height:2px;margin-left:-10px;display:block;}
#sidebar .barPlus {display:none;}
#sidebar .barSearch {background:url(../users/img/sepSidebar.png) repeat-x;position:absolute;bottom:20px;width:100%;color:#fff;padding:12px 0 11px;margin-left:-10px;}
#sidebar .barSearchInput {background-color:#232323;border-radius:50px;border:none;outline:none;width:120px;padding:5px 0px 5px 10px;margin-left:10px;font-family:'PT Sans',Arial,sans-serif;text-shadow:1px 1px #000;font-size:12px;color:#ccc;}
#sidebar .barOptions {background-image:url(../users/img/sprite.png);background-repeat:no-repeat;background-position:0 -23px;height:16px;width:16px;position:absolute;right:35px;top:17px;}
#sidebar .barSlide {background-image:url(../users/img/sprite.png);background-repeat:no-repeat;background-position:-17px -23px;height:16px;width:16px;position:absolute;right:10px;top:17px;}
#sidebar .barFriends p {color:#fff;text-shadow:1px 1px #000;font-size:12px;text-align:center;}

Merci d'avance