Scroller seulement le contenu de la page
Résolu/Fermé5 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
3 mai 2017 à 17:04
3 mai 2017 à 17:04
Salut,
Essaye de modifier ta classe content comme ceci :
Bonne journée,
Essaye de modifier ta classe content comme ceci :
.content {
position: fixed; /* contenu également en fixed */
top: 100px; /* position par rapport au header */
bottom: 70px; /* position par rapport au footer */
overflow: auto; /* barre de scroll si nécessaire */
padding: 100px;
}
Bonne journée,
Merci beaucoup pour votre réponse rapide! En effet, une barre de défilement pour le content apparaît, seulement comment faire pour qu'elle soit toujours situé à droite de l'écran quelque soit le contenu qu'il y a dedans?
J'ai réussi à avoir un affichage correct avec la barre de défilement sur le content. Cependant j'ai un autre souci : J'ai au départ mon content disposé en 4 colonnes, et j'aimerai que sur des écrans plus petit donc des résolutions inférieurs à la mienne (1600*1200), je change l'affichage du content, par exemple qu'il n'y ait plus qu'une colonne. J'ai trouvé une propriété qui donne cela, mais lorsque le content passe à une colonne, je devrai avoir une barre de défilement vertical, or quelque soit la résolution de l'écran, la barre de défilement est horizontal. Comment avoir une barre de défilement toujours vertical quand on diminue la résolution de l'écran?
Voici mon code CSS :
Voici mon code CSS :
html, body {
padding:0;
margin:0;
height: 100%;
width: 100%;
}
.header {
position:fixed;
text-align:center;
overflow: hidden;
height:200px;
top:0;
left:0;
right:0;
font-weight : bold;
font-size: 18px;
font-family: "Arial"
}
.footer {
position:absolute;
height:70px;
bottom:0;
right:0;
overflow: hidden;
}
.content {
position : absolute;
top: 110px;
bottom:110px;
left: 0;
right: 0;
overflow: auto;
-moz-column-count: 4;
-webkit-column-count: 4;
}
@media all and (max-width: 900px)
{
.content {
-moz-column-count: 1;
-webkit-column-count: 1;
}
}
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
4 mai 2017 à 14:03
4 mai 2017 à 14:03
Le problème semble venir de "-moz-column-count: 1;" et "-webkit-column-count: 1;", une solution possible est de ne pas définir de column-count pour les résolutions plus petites que 900px.
Pour information concernant les media queries, on recommande souvent de commencer par définir le style pour la plus petite résolution puis on ajoute le style pour les plus grandes résolutions via les media queries (principe "mobile first").
Dans ton cas on peut donc corriger comme ceci avec ce principe :
Au passage attention a ne pas oublier de définir les propriétés sans préfixes vendeur : https://www.alsacreations.com/article/lire/1159-prefixes-vendeurs-css-proprietaires.html
Pour information concernant les media queries, on recommande souvent de commencer par définir le style pour la plus petite résolution puis on ajoute le style pour les plus grandes résolutions via les media queries (principe "mobile first").
Dans ton cas on peut donc corriger comme ceci avec ce principe :
.content {
position : absolute;
top: 110px;
bottom:110px;
left: 0;
right: 0;
overflow: auto;
/* pas de column count par défaut pour les petites résolutions */
}
@media all and (min-width: 900px) {
.content {
/* column count de 4 pour les résolutions plus grandes */
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
Au passage attention a ne pas oublier de définir les propriétés sans préfixes vendeur : https://www.alsacreations.com/article/lire/1159-prefixes-vendeurs-css-proprietaires.html
Merci pour toutes ces informations précises ! mais comment puis-je faire en sorte de ne jamais afficher la barre de défilement horizontale, seulement la verticale? Car lorsque je réduit ma fenêtre, le nombre de colonnes augmente, ce qui fait que je me retrouve avec une barre de défilement horizontale.
Ma page pourra aussi être consultée sur tablette donc je cherche le meilleur affichage possible :)
Ma page pourra aussi être consultée sur tablette donc je cherche le meilleur affichage possible :)
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
Modifié le 4 mai 2017 à 15:33
Modifié le 4 mai 2017 à 15:33
Je n'ai bien qu'une barre de scroll verticale avec ton code : https://jsfiddle.net/pLvkucyv/
josep-t
>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
Modifié le 4 mai 2017 à 16:04
Modifié le 4 mai 2017 à 16:04
En effet, je remarque que cela fonctionne avec du texte. Cependant moi ce sont plusieurs éléments "li" qui sont en colonnes, cela ne fait pas la même chose, comme tu peux le voir ici :
https://jsfiddle.net/pLvkucyv/1/
https://jsfiddle.net/pLvkucyv/1/
josep-t
>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
4 mai 2017 à 16:10
4 mai 2017 à 16:10
Et encore même avec le lien que tu m'a envoyé, en réduisant la hauteur de la fenêtre ( quand tu as les 4 colonnes), on obtient une barre de défilement horizontale...
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
4 mai 2017 à 16:44
4 mai 2017 à 16:44
J'ai du mal à comprendre le comportement du div en position absolute avec column-count, en ajoutant un div en position static l'affichage semble correct : https://jsfiddle.net/pLvkucyv/2/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question