Overflow : définir plusieurs overflows sur une page

Invité · 25/06/2014, 09h45

Bonjour,

j'ai une page avec une premièere partie fixe sans overflow et en dessous une partie scrollable avec un "overflowy:scroll;"
J'aimerai que dans cette seconde partie le haut reste fixe Comment doisje procéder ?

Voici le résultat attendu: la partie intermediaire doit rester fixe

Nom : 2014-06-25_09h43_35.png
Affichages : 85
Taille : 20,1 Ko

Nom : 2014-06-25_09h43_35.png
Affichages : 85
Taille : 20,1 Ko

**Bisûnûrs** · 25/06/2014, 09h58

Un simple position:absolute; sur ton div violet devrait suffire non ?

Invité · 25/06/2014, 10h16

C'est ce que je croyais mais non

voici la structure actuelle:

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
<BODY class="formulaire" onload="scrollToSelectedIndex();">
        <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
              <DIV ID="page" ALIGN="CENTER">
                     element rouge
                  <DIV id="tableau" style="position: fixed; <%=(classe.getHauteurScroll() > 0?"height:  "+classe.getHauteurScroll()+"px; overflow-y: scroll; ":"")%>" >
	              <table class="formulaire" width="100%">
		          element rose
	              </table>
	              <table class="formulaire" width="100%">
		          element vert
	              </table>		
                    <div>
               <div>
       <div>
<BODY>

**Bovino** · 25/06/2014, 10h24

Si tu ne veux pas qu'il y ai de scroll sur la tableau rose, sors-le de la div ayant le scroll...

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
<BODY class="formulaire" onload="scrollToSelectedIndex();">
        <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
              <DIV ID="page" ALIGN="CENTER">
                     element rouge
	              <table class="formulaire" width="100%">
		          element rose
	              </table>
                  <DIV id="tableau" style="position: fixed; <%=(classe.getHauteurScroll() > 0?"height:  "+classe.getHauteurScroll()+"px; overflow-y: scroll; ":"")%>" >
	              <table class="formulaire" width="100%">
		          element vert
	              </table>		
                    <div>
               <div>
       <div>
<BODY>

Invité · 25/06/2014, 10h46

J'aurais du mentionner que dans la structure de mon code les parties rose et verte sont dans un onglet présent dans ma partie scrollable qui regroupe plusieurs onglets, d'où ma difficulté

**Muchos** · 25/06/2014, 12h58

POSITION:FIXED fonctionne, même si la difficulté sera de gérer la largeur de la partie rose (pour voir la scroll bar), et d'adapter le code à ta structure (tu parles d'onglet, je vois des tableaux, j'ai peur

)

Proposition (voir sur CodePen) :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Partie fixe dans une boîte scroll</title>
  <style type="text/css">
html, body {
  height: 100%;
  margin: 0;
}
header {
  min-height: 20%;
  background: red;
}
main {
  display: block;
  position: relative;
  overflow: scroll;
  height: 80%;
  line-height: 3em;
  background: green;
}
div {
  position: fixed;
  min-height: 10%;
  width: 98.5%;
  background: pink;
}
.firstItem {
  margin-top: 10%;
}
  </style>
</head>
<body>
<header></header>
<main>
  <div></div>
  <p class="firstItem">foo<br>bar<br>more</p>
  <p>foo<br>bar<br>more</p>
  <p>foo<br>bar<br>more</p>
</main>
</body>
</html>

Invité · 17/07/2014, 13h52

Merci pour le temps passé, effectivement , le code craint un peu lol mais j'ai pu m'en sortir en enlevant l'overflow de l'onglet en en redefinissant l'ensemble des divs internes

Overflow : définir plusieurs overflows sur une page

CSS

Discussions similaires

Partager

Partager