Je traite une page assez standard (ou si j'ai pensé). Ce que je voudrais faire est de permettre à la page d'avoir sa largeur déterminée par la balise <body> et un style de haut niveau .page que j'ai défini dans mon css. Mon site a un volet de navigation gauche qui est TOUJOURS d'une certaine largeur. La zone "content" s'étire avec la page et doit être déterminée par l'espace restant qui consomme l'écran des utilisateurs. Je voudrais montrer des barres de défilement sur le contenu qui ne «garde pas la paix» avec ma largeur de zone flottante. Par exemple, j'ai récemment découvert une série de sous-éléments qui nécessitent des barres de défilement pour éviter que la page ne s'étende dans l'éternité.Comment configurer un div enfant pour afficher les barres de défilement uniquement lorsque les paramètres d'un pourcentage div divisent l'exigent
Voici une image simple de la façon dont les choses se présentent quand les barres de défilement ne sont pas nécessaires: 
Voici à quoi il ressemble quand mon contenu secondaire est plus large que la page: 
Ce que je J'aime faire est de montrer des barres de défilement sur les sections rouges quand elles remplissent leur espace autorisé (y compris les marges et le remplissage). Je voudrais que tout soit bien rembourré contre la section bleue afin que les sections jaunes et blanches ne se chevauchent pas.
Je joins le code html que je fabriquais cette affichage, parce que je ne pouvais pas penser à une meilleure façon de décrire mon approche:
<html>
<head>
<style type="text/css">
body
{
background-color: gray;
}
.page /* page is always centered on screen */
{
background-color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
.nav-pane /* navigation pane is always 100px */
{
width: 100px;
height: 100%;
background-color: green;
}
.nav-pane > div
{
width: 100px;
}
.content-pane /* content pane should size with page */
{
background-color: yellow;
margin: 10px;
}
.content-pane > div /* !!! SHOULD NOT STRETCH !!! */
{
position: relative;
overflow: auto;
background-color: blue;
padding: 10px;
margin: 10px;
color: white;
}
.content-pane > div > *
{
clear: both;
}
.content /* content div holds tables, images, paragraphs, etc.. */
{
background-color: red;
float: left;
margin-bottom: 20px;
}
#small /* one is small */
{
width: 200px;
}
#big /* one is BIG! */
{
width: 4000px;
}
</style>
</head>
<body>
<div class="page">
<table width="100%" style="border: solid black">
<tr>
<td class="nav-pane">
<div>
I am the nav-pane
</div>
</td>
<td class="content-pane">
<div>
I am the content pane
<h2>I am a heading</h2>
<div class="content">
<div id="small">Scrollbar not needed</div>
</div>
<h2>I too am a heading</h2>
<div class="content">
<div id="big">I require a scroll bar to keep this page pretty... :(</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Est-ce que je suis en train de faire encore possible sans utiliser javascript?
Merci à l'avance pour tout comprendre ...
Je ne peux pas voir les images, seulement le texte alt. – pixeline