Bloquer défilement bloc DIV à droite

**Christophe** · 29/08/2024, 11h23

Bonjour,

Je ne maitrise pas le CSS.
J'ai une page avec 2 DIV les 2 l'un à coté de l'autre avec float: left et float right

Code :

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

1
2
3
 
#liste {float: left; width : 30%}
#contenu {float: right; width: 70%; height: 100%;}

Je souhaiterais que le bloc de droite soit figée sur l'écran tandis que la partie gauche puisse s'étendre vers le bas et que du coup l'ascenseur haut/bas du navigateur ne fasse pas bouger le contenu du bloc de droite. L'ascenseur étant actif qu'à partir de texte au niveau g h dans l'exemple fourni.
Nom : exemple.png
Affichages : 245
Taille : 2,7 Ko

Nom : exemple.png
Affichages : 245
Taille : 2,7 Ko

Merci d'avance.

**Pytet** · 29/08/2024, 13h13

Bonjour,

Un exemple en utilisant position: fixed; :

Code html :

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

1
2
3
4
5
6
7
<div id="contenu">
  Contenu
</div>
 
<div id="liste">
  Liste
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
#liste {
  width: 30%;
  height: 2000px;
  background: lightgreen;
}
 
#contenu {
  position: fixed;
  left: 30%;
  width: 70%;
  background: lightblue;
}

https://jsfiddle.net/3gmsuL1x/

**Christophe** · 29/08/2024, 20h04

Merci, je vais regarder demain.

Je vais peut-être m'orienter vers des grid-layout ou flexbox pour faciliter le placement d’éléments.

Quel est ton avis ?

**mathieu** · 29/08/2024, 20h14

Envoyé par chrtophe

Je vais peut-être m'orienter vers des grid-layout ou flexbox pour faciliter le placement d’éléments.

si vous avez juste besoin d'organiser ces 2 balises et que le code que vous a montré Pytet donne le résultat souhaité, ne vous embêtez pas a recommencer avec une autre disposition.
ou peut-être que votre page est plus complexe ? en sachant que les différentes dispositions peuvent s'imbriquer donc vous pouvez décomposer la page en différentes parties qui seront plus faciles à mettre en place.

**Christophe** · 30/08/2024, 07h44

Je prévois surtout la possibilité de complexification et donc partir dès le départ sur une structure adaptable.

**Christophe** · 30/08/2024, 12h16

Voici mon code squelette :

Code html :

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
 
<html>
    <head>
        <style>
            #liste {float: left;}
            #contenu {float: right;}
        </style>
    </head>
    <body>
        <div id="titre">
            <center><font size="6">Titre</font></center>
        </div>
        <div id="conteneur">
            <div id="liste">
                <?php
                    for ($boucle=0;$boucle<50;++$boucle)
                    {
                        echo "texte<br>";
                    }
                ?>
            </div>
            <div id='contenu'>
                <iframe name="contenu" src="contenu.php" width=100% height=100%</iframe>
            </div>
            </div>
        </div>
    </body>
</html>

Si j'ajoute position:fiixed au div liste, le texte ne defile plus, si je l'ajoute au div contenu les deux se chevauchent.

D'autre part, j'ai un ascenseur même avec texte vide à gauche équivalent à la hauteur du div titre.

J'ai regardé vite fait les grid-layout, j'ai pas compris comment positionner entre les lignes et colonnes.
Je vais regarder du coté des tableaux.

Bloquer défilement bloc DIV à droite

CSS

Vue hybride

Discussions similaires

Partager

Partager