CSS 100% de la largeur du navigateur pour le redimensionner

Salut à tous je suis en train de construire une mise en page à l'aide de CSS et je suis venue à l'encontre d'un problème étrange. Bien étrange pour moi. J'ai 3 divs un en-Tête, un Pied de page et un MainContent zone. L'en-tête et Pied de page doit rester à une largeur constante de 100% tandis que le MainContent zone doit être fixé de manière centralisée, 996px; C'est bien beau mais quand je redimensionner la fenêtre du navigateur pour une largeur inférieure à 996px puis faites défiler le contenu de la fenêtre à droite de 100% de l'en-tête et pied de page semble être tronquée et non plus de 100%. J'ai frappé un peu de bare-bones le script pour illustrer la question (modèles en ligne pour garder compact). Je sais que je peux ajouter overflow:hidden pour chacun des conteneurs afin de désactiver les barres de défilement lorsque la fenêtre est redimensionnée. J'ai aussi écrit un petit morceau de jQuery pour forcer la div est de retour pour
la largeur, si la largeur descend en dessous d'une certaine largeur. Cependant, ma question est dans le CSS, est-il un meilleur pur CSS correctif de ce problème? Ou quelqu'un peut-il expliquer pourquoi cela se produit?
Merci à l'avance!
DotsC

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">

    <div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>

    <div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
        <div id="inner-content">
            CONTENT OF THE PAGE HERE
        </div>
    </div>
    <div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>

  • poste ton code css et html.
InformationsquelleAutor DotsC | 2010-09-27