Obtenir overflow-y: faire défiler pour travailler avec un positionnement fixe html & css

J'ai un outil de défilement Jquery qui est réglé pour être fixé au bas de la fenêtre du navigateur.Obtenir overflow-y: faire défiler pour travailler avec un positionnement fixe html & css

Tout ce que je veux, c'est que la page puisse défiler verticalement lorsque le navigateur a moins de 700 pixels de haut. (donc aucun contenu n'est caché, comme c'est tout lieu fixe). Cela donne l'impression que cela devrait être simple mais cela me cause d'énormes maux de tête. js solutions sont bien à ce stade.

Merci d'avance.

http://www.vagabondbrigade.com/staging/berns/

Source

2010-06-14 Vagabond_King

Que demandez-vous, quel est votre problème et quel est votre effet déifié? Avez-vous un exemple vivant que nous pouvons voir? Je comprends que vous êtes frustré, mais nous avons besoin de détails plus raffinés plutôt que d'une tonne de code et d'une vague explication. Aidez-nous à vous aider :) – Kyle

Si vous faites référence au contenu qui est coupé en haut de la page, je recommande de mettre les marges supérieure et inférieure sur votre page css aux éléments appropriés pour exploiter leur positionnement.

Vous pouvez faire une hauteur ou une largeur fixe pour la structure principale de la page, puis les autres éléments que vous souhaitez positionner, les positionner en conséquence.

exemple:

/* html */

<div id="main_structure"> 
    <div id="content"> 
     blah blah blah 
    </div> 
</div>

/* * css/

#main_structure {width:100%; height:700px; margin:20px 20px 20px 20px; padding:20px;} 
#content {width:200px; height:200px; padding:10px; margin:20px;}

Source

2010-06-14 21:34:19 LightningWrist

Je viens de réaliser que je n'ai pas répondu à toutes vos questions. Si vous voulez le faire défiler pour ajouter simplement overflow: auto dans l'élément css correct avec une hauteur minimale de 700px – LightningWrist

Jouer avec Firebux sur votre page (le lien que vous avez fourni), J'ai ajouté à div.floor_items un dépassement de propriété: auto; et le problème a été résolu;)

Le contenu était plus grand que ma résolution d'écran de test, et le contenu n'était pas tout visible, mais avec ce changement, la barre de défilement est apparue et me permet de faire défiler et afficher le "hors écran " contenu!

Ceci est votre solution, si c'était votre problème!

Source

2010-06-14 21:43:37 Zuul

Je trouve qu'ajouter overflow: auto à div.floor_items ajoute la barre de défilement, mais en ajoutant une barre de défilement vide que vous pouvez ne défile pas avec. Je vérifie cela sur Firefox et Safari. –

Wend J'ai testé cela, la barre de défilement est apparue seulement si la résolution était inférieure à la nécessaire pour afficher le contenu entier ... Néanmoins, si je me souviens correctement de votre code, la structure du site est assez étrange, et depuis Je ne visualise pas la grande image, il est difficile de résoudre votre problème! Ne pouvez-vous pas placer du contenu supplémentaire sur votre page de développement? il serait plus facile de fournir une aide supplémentaire! – Zuul

Avez-vous essayé d'utiliser les requêtes média css en ajoutant overflow-y: faites défiler jusqu'à html ou votre élément conteneur? http://www.w3.org/TR/css3-mediaqueries/

@media screen and (max-height: 700px) { 
     #your_element_to_scroll {overflow-y: scroll;} 
}

Cela ne fonctionnera pas dans une version plus ancienne de IE.

Source

2011-11-21 05:28:32 rqmedes

Obtenir overflow-y: faire défiler pour travailler avec un positionnement fixe html & css

Répondre

Questions connexes