Block scrollable redimentionné avec la fenêtre

**joan38** · 02/09/2010, 16h24

Bonjour,

Mieux vaut un dessin qu'un long discoure :

Ce qui va pas :

Ce que je veux (Modifier avec paint, si non je serais aux ange) :

Légende :
Jaune: Block general dans le quel il y a tout
Rouge transparent: Titre et pied de block
Bleu transparent: Block scrollable

Vert: Mélange de bleu de jaune par transparence
Orange : Mélange de rouge et de jaune par transparence

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<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'>
		#block {
			position: fixed;
			width: 100px;
			top: 300px;
			bottom: 300px;
 
			background: yellow;
		}
		#list {
			overflow: auto;
 
			background: rgba(0,255,0,0.2);
		}
	</style>
</head>
 
<body>
	<div id="block">
		<div style="height:25px; background:rgba(255,0,0,0.2);">dfhdfhd</div>
		<div id="list"><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div></div>
		<div style="height:25px; background:rgba(255,0,0,0.2);">tjiouhjh</div>
	</div>
</body>
</html>

Explications :
Je veux un block dans lequel il y a :
- Un block titre
- Un block scrollable
- Un pied de block
Le tout ce redimensionne avec la hauteur de la fenêtre (et non la page), grâce aux directive top et bottom.
Donc le truc prend la hauteur de la fenêtre que l'on soit riche (television OLED 16:9 999999px*9999px) ou que l'on soit pauvre (ecran catodique 600px*400px), je veux faire un truc socialiste quoi...

Merci de votre aide.

**Lenézé** · 02/09/2010, 16h55

Bonjour joan,

Voici le gabarit de ce que tu souhaites (je pense) faire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
	<style type='text/css'>
		*{
			margin:0;
			padding:0;
			border:0;
		}
		body{
			text-align:center;
		}
		#container{
			margin; 0 auto 0 auto;
			background-color:red;
			height:100%;
			text-align:left;
		}
		#scrollable{
		overflow: auto;
		height:50px;
		width:200px;
		}
 
	</style>
</head>
<body>
	<div id="container">
		<div id="content">
			<h1>Title</h1>
			<div id="scrollable">
				<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
			</div>
			<div id="footer">
				footer
			</div>
		</div>
	</div>
</body>
</html>

Cela répond il à tes attentes?

Dans l'attente de ta réponse, je te souhaite une très agréable fin de journée,
Cdt,

Lenézé

**joan38** · 02/09/2010, 21h36

Nan c'est pas bon.

J'ai modifié : margin; 0 auto 0 auto;
par : margin: auto 100px auto 100px;

J'ai enlevé le : height:50px; car il ne peut y avoir une hauteur fixe vu que c'est la taille de la fenêtre du navigateur qui la fixe.

J'ai réussi à faire ce que je veux faire sans le titre et le pied de bloc comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#scrollable{
	position:fixed;
	overflow:auto;
	top:30px;
	bottom:30px;
}

Et ça marche niquel mais des que je veux un titre...

J'ai tenté de placer le titre et le pied de bloc avec top et bottom comme le bloc scrollable (en mode bricolage) mais selon les navigateur les blocs bougent de quelques px... grrrrrr

Merci

**Lenézé** · 02/09/2010, 22h08

Dur dur

Je ne vois pas comment tu peux faire un scroll vertical sans spécifier de height.

Le plus simple ne serait-il pas de spécifier une valeur de base (600px par exemple) puis de la modifier en fonction de chaque internaute (via javascript)?

**joan38** · 02/09/2010, 23h20

Ok bon ba, heureusement que javascript est la !

SOLUTION Javascript (onResize et onLoad) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!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'>
		#block {
			position: absolute;
			width: 100px;
			top: 100px;
			bottom: 100px;
 
			background: yellow;
		}
		#list {
			overflow: auto;
 
			background: rgba(0,255,0,0.2);
		}
	</style>
</head>
 
<body onResize="document.getElementById('list').style.height = eval('document.getElementById(\'block\').offsetHeight - (document.getElementById(\'top\').offsetHeight + document.getElementById(\'bottom\').offsetHeight)') + 'px'" onLoad="document.getElementById('list').style.height = eval('document.getElementById(\'block\').offsetHeight - (document.getElementById(\'top\').offsetHeight + document.getElementById(\'bottom\').offsetHeight)') + 'px';">
	<div id="block">
		<div style="height:25px; background:rgba(255,0,0,0.2);">dfhdfhd</div>
		<div id="list"><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div><div>hthth</div></div>
		<div style="height:25px; background:rgba(255,0,0,0.2);">tjiouhjh</div>
	</div>
</body>
</html>

Merci Lenézé de t'être creusé la tete avec moi

Le CSS c'est vraiment un truc qui m'insupport, le rendu est toujours bidon et pourtant je fait un site uniquement pour navigateurs 100% W3C.

**joan38** · 02/09/2010, 23h39

Et si comme moi vous faite du PHP et que le body est deja passé dans un autre pour charger des menu et tout et tout... et que vous êtes dans un include :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<script type="text/javascript">
	window.onresize = function() { document.getElementById('list').style.height = eval('document.getElementById(\'block\').offsetHeight - (document.getElementById(\'top\').offsetHeight + document.getElementById(\'bottom\').offsetHeight)') + 'px'; }
	window.onload = function() { document.getElementById('list').style.height = eval('document.getElementById(\'block\').offsetHeight - (document.getElementById(\'top\').offsetHeight + document.getElementById(\'bottom\').offsetHeight)') + 'px'; }
</script>

Block scrollable redimentionné avec la fenêtre

CSS

Vue hybride

Discussions similaires

Partager

Partager