web-dev-qa-db-fra.com

Largeur minimale dans le redimensionnement de la fenêtre

J'ai une page Web avec une mise en page fluide avec une largeur de 100%.

Lorsque je redimensionne la fenêtre du navigateur, les éléments de la page se chevauchent.

Je créerais un effet similaire à ce site Web http://bologna.bakeca.it/ que lorsque la fenêtre est plus petite qu'un arrêt de redimensionnement à largeur fixe.

htmlcsswindow-resize
30
pAkY88

Vous pouvez définir la propriété min-width de CSS pour la balise body. Comme cette propriété n'est pas prise en charge par IE6, vous pouvez écrire comme:

body{
   min-width:1000px;        /* Suppose you want minimum width of 1000px */
   width: auto !important;  /* Firefox will set width as auto */
   width:1000px;            /* As IE6 ignores !important it will set width as 1000px; */
}

Ou:

body{
   min-width:1000px; // Suppose you want minimum width of 1000px
   _width: expression( document.body.clientWidth > 1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */
}
50
Chinmayee G

Eh bien, vous vous êtes à peu près donné la réponse. Dans votre CSS, donnez à l'élément contenant une largeur minimale. Si vous devez prendre en charge IE6, vous pouvez utiliser l'astuce min-width:

#container {
    min-width:800px;
    width: auto !important;
    width:800px;
}

Cela vous donnera effectivement une largeur minimale de 800 pixels dans IE6 et tous les navigateurs à jour.

6
DanMan