Barre de défilement verticale

Bonjour,
Mon site comporte une section (div #corps) qui comporte le corps principal du contenu.
Je souhaite lui associer une barre de défilement la rendant visible avec toutes les tailles de fenêtre et d'écran.
Cette div comporte des div classiques #gauche, #droite, #centre et des sous-div
Or, la barre (#corps{overflow-y:auto;...} ne tient compte que du contenu d'une "sous-sous div"
Voici parties des sources html et css:

<div id='Corps'>
	<div id='gauche'>
	<h2>GALERIES EXISTANTES</h2>
		<ul>
			<li><a href="./galeries.php?ssrep=bateaux" class="Lien" title="titre.">legende</a></li>
			<li><a href="./galeries.php?ssrep=brumes" class="Lien" title="titre.">autre legende.</a></li>
			<li><a href="./galeries.php?ssrep=contre" class="Lien" title="titre.">encore une.</a></li>
			...
		</ul>
	</div>
	<div id='droite'>
		<h2>Pr&eacute;sentation:</h2>
		<br />
		<p>&nbsp;&nbsp;bla bla....
		</p>
		<div>
			<h2>Liens pr&eacute;f&eacute;r&eacute;s:</h2><br />
			<a href="" target="blank">			<img src=".gif" title="le lien"/></a>
			...
		</div>
		<p>
			<br /><h2>Infos visiteur:</h2>
			<br />
			...
		</p>
		<br /><a href="mailto:"><h2>Vos avis et suggestions ?</h2></a>
	</div>
	<div id='centre'>
		<div>
			<p>&Eacute;chantillon au hasard.</p><br />
			<ul>
				<li><img oncontextmenu="return false" src="./img/.jpg" height="400px" title=""></li>
				<li><img src="./communs/espace.gif"></li>
				...
			</ul>
			<br /><p>Passer le curseur sur la photo pour en arr&ecirc;ter le d&eacute;filement.</p>
		</div>
	</div>
</div>
<div id='BasDePage'>
	Pages bla bla bla ...
	<span style="font-size:0.7em;">(&nbsp;165&nbsp;visites&nbsp;&agrave;&nbsp;ce&nbsp;jour&nbsp;24&nbsp;octobre&nbsp;2020&nbsp;)</span>
</div></body></html>

html, body{
	min-height:100vh; height:100vh; max-height:100vh;
	min-width:100vh; width:100vh; max-width:100vh;
	overflow:hidden;
}
body{
	font-size:0.9em; font-family:verdana, Arial, Helvetica, sans-serif;
	background-color:#EEE;
}
#Corps{
	position:fixed; top:130px;
	width:auto;
	height:100%; overflow-y:auto;
	line-height:100%;
	background-color:#777;
}
#gauche, #droite{
	width:250px; height:100%;
	border:1px solid black;
	padding:20px 10px;
	text-align:left;
	color:#FFF;
}

#gauche {
	float:left;
}
#droite{
	float:right;
	display:inline;
}
#centre{
	display:flex;
	width:auto; height:100%;
	margin:0px 250px;
	background: no-repeat center/cover url("./pcontact.jpg");
}
#centre div{
	height:600px; width:600px;
	margin:auto;
	overflow-x:hidden;
}

Précisément, cette barre n'apparait que lorsque la hauteur d'écran mord sur la la sous-div "#centre div"
Merci pour vos conseils !

Bonjour,

Il me semble qu'une barre de défilement apparait quand c'est nécessaire (c'est à dire quand le contenu de l'élément html auquel elle se rapporte dépasse la place disponible). Du coup, j'ai du mal à voir ici dans quel cas elle serait nécessaire tout en étant manquante ?

EDIT: ça y est, je pense avoir vu le problème, c'est une barre de défilement horizontale qui n'apparait pas !

Amicalement,
Modifié par parsimonhi (24 Oct 2020 - 13:08)

La barre de défilement VERTICALE devrait concerner l'élément ENTIER "div #corps" avec tout ce qu'elle contient., Elle semble ne concerner qu'une sous-sous-div (#corps #centre div) alors que les autres sous-div plus hautes devraient aussi être concernées (#corps #droite notamment).
Merci

Bonjour,

Alors, il y a 2 solutions.

1) solution 1 : on reprend tout à zéro (html + css) !

La raison est d'une part que ton html est plus que perfectible au niveau des balises (trop de <div>, pas assez d'éléments ayant une signification sémantique (où est le <main> ?), éléments qui ne sont pas dans l'ordre d'apparition, etc.). Et d'autre part, ton css est à la limite de l'ingérable. Du coup, il n'est pas étonnant que tu aies du mal à t'en sortir (même en étant expérimenté, c'est difficile de s'y retrouver).

2) solution 2 : on corrige essentiellement pour répondre à la question

Même dans ce cas, il y a pas mal de chose à faire pour revenir à une situation maitrisable. L'idée générale, c'est qu'il faut simplifier et revenir à des mécanismes simples.

2a) pour le html, mettre la balise <div id="centre"> entre les balises <div id-"gauche"> et <div id="droite">. On a ainsi les balises dans leur ordre d'apparition à l'écran.

2b) pour le css, il y a beaucoup de chose qui empêche la page de s'afficher en s'adaptant aux différents écrans.

- le position:fixed du corps est à supprimer. C'est pratiquement toujours une mauvaise idée d'utiliser position:fixed. A la rigueur on peut l'employer pour un header, un footer ou un menu qui doivent toujours restés visibles, un élément mineur de la page qui a une fonction particulière, mais surement pas pour le contenu principal de la page. Dans ton cas, j'imagine que tu réserves ainsi de la place pour un header. Il y a des tas d'autres moyens pour réserver cette place. Si le header est sorti du flux, ce qui est probable ici (via un position:fixed; par exemple), alors un simple margin-top pour #corps fait l'affaire. Si on ne fait pas ça, il ne bougera pas, le bougre !

- le style du début du css html, body{...} est à supprimer lui aussi. Il est source de problèmes multiples. Je ne vois pas trop à quoi il pourrait servir si ce n'est à empêcher les barres de défilement de faire ce pourquoi elles sont faites.

- tous les overflow sont à supprimer. Le overflow, c'est à reserver pour des éléments internes aux fonctions particulières (genre une galerie d'image, un encart dans un conteneur fixe, etc.), mais à éviter voire à proscrire pour les éléments principaux de la page.

- les float sont à supprimer. On est en 2020. Ça devient rare quand un float est indiqué, du fait qu'on a flex et grid.

- les width et les height sont à réduire drastiquement. Une height:100%, la plupart du temps, ça sert à rien.

- donner un display:flex à #corps simplifie sans doute pas mal derrière. Et comme tu l'utilises par ailleurs, pourquoi ne pas l'utiliser là aussi ?

Du coup, on obtient ça :

body{
	font-size:0.9em;
	font-family:verdana, Arial, Helvetica, sans-serif;
	background-color:#EEE;
}
#Corps{
	margin-top:130px; /* on suppose qu'il y a au dessus un header sorti du flux */
	background-color:#777;
	display:flex;
	justify-content:space-between;
}
#gauche, #droite{
	flex:0 0 250px;
	border:1px solid black;
	padding:20px 10px;
	text-align:left;
	color:#FFF;
}
#centre{
	background: no-repeat center/cover url("./pcontact.jpg");
}
#centre div{
	width:600px;
	height:600px;
	margin:auto;
	overflow-x:hidden; /* douteux, mais il y a peut-être une bonne raison pour celui-là */
}
img {max-width:100%;}

EDIT: j'ai rajouté un flex sur #gauche et #droite pour qu'ils fassent exactement 250px de large.

Amicalement,
Modifié par parsimonhi (25 Oct 2020 - 09:52)

Évite également les sauts de ligne br
Tu as Margin en css pour cela
Moins tu utilises de balise en html, mieux c est

Pour la navigation du début j aurais plutôt englober les lien a avec la balise nav
<nav>
<a></a>
...
</nav>