comment faire pour activer le défilement plutôt que de les écraser divs ensemble

sur mon site web, c'est un div de mise en page lorsque la fenêtre est reszied tout est poussé ensemble. Tels que des images se chevauchent ou sont déplacé au-dessous les uns des autres et les divs aussi se chevauchent les uns les autres.

Comment puis-je obtenir de défilement lorsque le contenu de la div est plus grande que la taille de la fenêtre, semblable à facebook si vous redimensionnez la fenêtre, il empêche tout overlappting et tout simplement à l'utilisateur de faire défiler?

body
{
    background-color: #B0B0B0;
    color: #ffffff;
    margin-top: 0px;
    margin: 0px;        
}

#header
{   
    width: 100%;
    height: 100px;
    margin: 0px;
    padding: 0px;
}

#content
{

    width: 80%;
    height: 800px;  
    margin-top: 50px;       
    margin-left: auto;
    margin-right: auto;
    padding: 30px;      
}

<div id="header">
[Header]
</div>
<div id="content">
[Content]
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" />
</div>

Le html est comme ça, mais évidemment avec plus de contenu

Espère que je n'ai pas fait ce trop confus, merci.

OriginalL'auteur Elliott | 2010-10-18

  1. 7

    Juste ajouter overflow:auto; à votre div.

    Vous pouvez également utiliser les options suivantes si vous ne voulez x ou y défilement

    overflow-x:auto;

    ou

    overflow-y:auto;

    OriginalL'auteur Rocket Ronnie

  2. 2

    utiliser le overflow:scroll; pour activer le défilement dans les DIVs

    Merci mais je veux que l'ensemble de la page pour faire défiler pas seulement un div.
    Dans ce cas, essayez overflow:auto; ou ajouter overflow:scroll sur le corps de la classe dans le css.

    OriginalL'auteur Sachin Shanbhag

  3. 2

    Vous devez ajouter white-space:nowrap; à votre balise body.

    Qui fonctionne en quelque sorte, bien que j'ai de défilement quand sa pleine taille et de tout mon contenu est une ligne.
    Ce qui se passe si vous l'oubliez au sujet de la propriété white-space et remplacer largeur:70%; max-width:70%; #l'élément de contenu?

    OriginalL'auteur Tae

  4. 1

    Je crois que vous pouvez overflow: auto;

    Voici une comparaison entre auto et scroll.

    OriginalL'auteur DOK

  5. 0

    ajouter le style

    overflow: scroll;

    à #content

    J'ai juste ajouté de cela, mais il montre des barres de défilement avant, il est redimensionné, et il ne faut pas faire défiler horizontalement. Merci.
    essayez overflow-x: scroll; overflow-y: scroll; Et qu'entendez-vous par "redimensionnée"?
    Redimensionner la fenêtre du navigateur. J'ai essayé et il n'a pas fait toute la différence , je veux activer le défilement avant que quelque chose commence à se chevauchent. Sur facebook vous pouvez reszie la fenêtre uniquement à un certain point, avant de défilement commence. Merci encore.

    OriginalL'auteur Brad

  6. 0

    Cette réponse est assez fin, cependant, je suis tombé sur cette question, comme j'ai eu des questions sur une de mes pages, où j'ai cette Page avec 30 étrange entrées de différents types, qui sont répartis entre les deux tables. J'ai été incapable de faire défiler jusqu'à voir sur les 10 ou si les entrées au bas de la page, et ne pouvait même pas faire défiler de gauche à droite lors de l'ajustement des navigateurs largeur.

    Ce qui a résolu mon problème était:

        html, body {
    overflow: visible;
    }

    Cette activé mon X et Y de la barre de défilement.

    J'ai eu un problème avec mon pied de page ne s'ajustent pas lors du défilement, au lieu de cela, il serait juste de rester fixe où il était situé à l'avant de défilement. cela était dû à mon maître CSS ayant le pied de page de la position absolue. Simple correction, juste à créer un nouveau style de l'élément dans la page et ajouté 

    footer {
        position: fixed;
        min-width: 100%;
    }

    J'espère que cela aide quelqu'un à la recherche d'une solution.

    OriginalL'auteur user3726345

  7. 0

    Comme l'a déclaré user3726345 , la meilleure option pour les utiliser est le 

    html,body {
overflow: visible;
}

    à l'aide de 

    overflow: auto;

    dosnt donner le meilleur rendement. ensuite, vous pouvez ajuster votre pied de page de codes à votre goût.

    OriginalL'auteur Christopher