Avoir un slider à height: 100%

Version imprimable

Bonsoir,
je n'arrive pas à avoir mon slider à height :100%.
J'ai regardé les CSS des dizaines de fois :weird:
Je l'ai mis en ligne :
https://lapagetest.fr/test/test.html
Tout cela s'est produit lorsque j'ai supprimé le

Code:

top: 50px

Code:

1
2
3
4
5
6
7
8
9
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
	position: absolute;
	width: 100%;
	height: 100vh !important;
	left: 0;
	top: 0;
}

Voici le reste (les principales) des CSS :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
#slider {
	margin: 0px;
	height: 100vh;
}
.sl-slider {
	position: absolute;
	left: 0;
	top: 0px;
	margin-top: 0;
	height: 100vh !important;
	background-color: #000000;
}
 
 
 
.sl-slide {
	z-index: 1;
	 data-orientation="vertical" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"
}
 
/* The duplicate parts/slices */
 
.sl-content-slice {
	overflow: hidden;
	position: absolute;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background-color: #000000;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity : 1;
 
}
 
 
/* Vertical slice */
 
.sl-slide-vertical .sl-content-slice {
	width: 50%;
	height: 100%;
	top: -200px;
	-webkit-transform: translateX(0%) scale(1);
	-moz-transform: translateX(0%) scale(1);
	-o-transform: translateX(0%) scale(1);
	-ms-transform: translateX(0%) scale(1);
	transform: translateX(0%) scale(1);
}
 
.sl-slide-vertical .sl-content-slice:first-child {
	left: -200px;
	padding: 200px 0px 200px 200px;
}
 
.sl-slide-vertical .sl-content-slice:nth-child(2) {
	left: 50%;
	padding: 200px 200px 200px 0px;
}
 
/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
	position: absolute;
}
 
.sl-content {
	width: 100%;
	height: 100%;
	background: #fff;
}

Merci pour votre aide,
ED

Il y a aussi des parasites sur le slider. Impossible de savoir d'où ils proviennent :calim2:

Bonjour,

Citation:

J'ai regardé les CSS des dizaines de fois :weird:

bien souvent il ne faut pas se contenter de regarder mais de lire afin de voir le détail qui cloche !

On peut trouver par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .lddc .bg-img { box-sizing: border-box; position: absolute; top: -100px; /*-- il sert à quoi ce -100px ?? --*/ width: 100%; height: 100vh !important; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; overflow: hidden; }
c'est dans custom.css.

Remarque : tu peux te rapprocher de dhillig qui tu utilises le même domaine que toi pour ses tests, à moins que ...

27/06/2022, 20h16
el_debutanti

Bonsoir NoSmoking,
:ptdr:
J'ai bien regardé les CSS... mais les mauvaises... MERCI pour ton aide si précieuse.
J'y ai passé du temps pourtant :weird:
Je ferai attention la prochaine fois.
Encore merci et bonne soirée !
:zoubi:
07/11/2022, 15h20
el_debutanti

Message du 26/06/2022 à 19h24

Bonjour NoSmoking,
Le service de validation CSS détecte une "Erreur lors de l'analyse grammaticale" pour cette ligne là :

Code:

data-orientation="vertical" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"

Peux-tu m'aider stp ?
Merci :)