2013-05-31 6 views
-4

Voici le site que je construis à partir de zéro. Soudain, à un moment donné, la barre de défilement du navigateur disparaît. Comment le réparer?? MY WEBSITEBarre de défilement Soudainement ne fonctionne pas dans ma page

Utilisez (ctrl + (+)) OU (ctrl + (-)) pour effectuer un zoom avant ou arrière sur le site Web.

+2

Voir http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt- work-can-i-just-paste-a-link-to-it – Liam

+0

C'est parce que vous possédez votre élément en utilisant 'fixed' quand vous pouvez obtenir la même mise en page avec de meilleurs emplacements divisés. – Omega

+0

'-1' pour le code manquant. – Sourabh

Répondre

2

Le problème que vous rencontrez est que vous avez beaucoup de choses qui sont position: fixe;

Si vous faites ceci à partir de zéro ... Je vous suggère de recommencer. J'ai construit THIS dans jsfiddle en 3 minutes. C'est comme ça que vous construisez un site comme celui-ci maintenant. Cela commence aussi par le mobile ... donc avec quelques requêtes média et un slider responsive, vous devriez avoir une base beaucoup plus solide. J'espère que c'est utile. Le positionnement fixe extrait le contenu du flux, puis le navigateur ne voit pas à quel point il est "long" et supprime donc le besoin de défilement. Comme vous utilisez rêve tisserand ou quelque chose? Si oui, je peux voir comment cela est arrivé. Vous devriez probablement aller avec un doctype html 5 aussi bien. Prenez une grande respiration et repensez cela.

HTML

<header class="global-header"> 
    <div class="inner-w"> 
     HEADER 
    </div> <!-- .inner-w --> 
</header> 

<section class="main-content"> 
    <div class="inner-w"> 

     <div class="block">block</div> 

     <div class="block">block</div> 

     <div class="block">block</div> 

    </div> <!-- .inner-w --> 
</section> <!-- .main-content --> 

CSS

html, body { 
    margin: 0; 
    padding: 0; 
} 

.global-header { 
    width: 100%; 
    float left; 
    min-height: 150px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    background-color: lightblue; 
} 

.main-content { 
    width: 100%; 
    float: left; 
} 

.inner-w { 
    margin: 0 auto; 
    max-width: 900px; 
} 

.block { 
    width: 100%; 
    float: left; 
    background-color: #f06; 
    min-height: 200px; 
    margin-bottom: 20px; 
} 
+0

J'ai entendu que HTML 5 ne fonctionne pas bien sur tous les navigateurs. Bien que je concevais mon portfolio, je voulais qu'il fonctionne sur tous les navigateurs. donc j'utilise html 4 –

+0

html5 n'est pas juste une chose. C'est un tas de choses. Quand les gens disent cela, ils veulent dire que vous ne pouvez pas utiliser le stockage de données ou tout autre élément de HTML5. Un moyen simple de s'assurer que votre site fonctionne sur tous les navigateurs serait d'utiliser html5 et de ne pas utiliser les trucs de fantaisie. Utilisez

au lieu de - et tout ira bien. Pense au futur. Vous construisez un site Web pour les 4 prochaines années, pas il y a 4 ans. Si votre site Web est un portfolio de design, je vous suggère de le tenir à jour, car je ne ferais confiance à personne avec un code obsolète. – nouveau

+0

En outre, nous vous recommandons fortement de remplacer vos identifiants par des classes et d'enregistrer vos identifiants uniquement pour les hooks javascript et les occasions spéciales. De toute façon - 4 personnes ont répondu à votre question. Votre site Web ne défile pas car vous ne comprenez pas clairement le fonctionnement du modèle de boîte. Consultez cette explication --- http://css-tricks.com/the-css-box-model/ --- et allez-y et marquez l'une de ces réponses comme correcte. S'amuser! Bonne chance! – nouveau

0

Il est extrêmement faux de poser une question. Mais, j'ai firebugged votre site et a découvert que tout a fixed position, c'est la raison pour laquelle vous n'avez pas la barre de défilement. utiliser relative position

+0

'position: absolute' n'aidera pas non plus, car il supprime également l'élément du flux de documents. – Sourabh

1

N'utilisez pas position: fixed sur tout. Cela les sort du flux de documents. Utilisez position: fixed pour la bannière bleue supérieure si vous le souhaitez. Mais pour le repos, retirez-le. Cela le mettra à position: static (par défaut) qui résoudra le problème de défilement

Questions connexes