Overflow : définir plusieurs overflows sur une page

Version imprimable

25/06/2014, 09h45
Invité

1 pièce(s) jointe(s)

Overflow : définir plusieurs overflows sur une page

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

Pièce jointe 149624
25/06/2014, 09h58
Bisûnûrs

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

C'est ce que je croyais mais non

voici la structure actuelle:

Code:

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>

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

Code:

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>

25/06/2014, 10h46
Invité

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é

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 :mrgreen:)

Proposition (voir sur CodePen) :

Code:

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>

17/07/2014, 13h52
Invité

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