Faire des div couleur d'arrière-plan étendent sur toute la largeur

Ce que j'essaie de faire est d'avoir un bootstrap comme la barre de navigation la barre de navigation est autour de 960px dans le centre, mais ont la couleur d'arrière-plan couvrent toute la largeur de la fenêtre.

Toutefois, lorsque la fenêtre est inférieure à 960px de largeur, et je défilement, le fond ne va pas tout le chemin à la fin.

Faire des div couleur d'arrière-plan étendent sur toute la largeur

Est-il possible de faire cela sans avoir de règles personnalisées pour max-width(960px)?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
    <style type="text/css">
    #container {
        width: 960px;
        margin: 0 auto;
    }
    #nav {
        height: 33px;
        background-color: #cfcfcf;
    }
    </style>
</head>
<body>
<div id="nav">
    <div id="container">
        test
    </div>
</div>
</body>
</html>

Merci d'avance!

Edit: Oups. A un supplément de là, même si ce n'était pas le problème.

  • Drôle, il fonctionne très bien dans Chrome sur Windows.
InformationsquelleAutor Tech163 | 2013-02-03
  1. 1

    La hauteur doit être dans l'intérieur de la div (#container).
    essayez 

    #nav { background-color: #cfcfcf; }

#container {  
    height:33px;
    width:960px;
    margin: 0 auto; 
}

    voir http://jsfiddle.net/wYGLj/

    • Cela n'a pas fonctionné, mais j'ai réussi à le comprendre. Merci!
    InformationsquelleAutor pbaris
  2. 0

    Vous avez besoin de votre nav div pour couvrir la totalité de la page.

    #nav { width:100%; }

    travailleront dans ce cas.

    • Cela n'a pas fonctionné, mais j'ai réussi à le comprendre. Merci!
    • Merci de poster une réponse à votre propre question, alors.
    • Je n'ai stackoverflow.com/a/14673477/407248
    InformationsquelleAutor jchapa
  3. 0

    Votre CSS fonctionne comme il le devrait. Donc, si vous voulez qu'il mesure la totalité de la longueur de l'écran, créez un wrapper à gérer que le gris de l'élément. Comme cette.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
    <style type="text/css">
    #wrapper {
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #cfcfcf;
    }
    #container {
        width: 960px;
        margin: 0 auto;
    }
    #nav {
        height: 33px;
    }
    </style>
</head>
<body>
<div id="wrapper">
<div id="nav">
    <div id="container">
        test
    </div>
</div>
</div>
</body>
</html>
    • Cela n'a pas fonctionné, mais j'ai réussi à le comprendre. Merci!
    InformationsquelleAutor JakeGould
  4. 0

    J'ai ajouté

    body {
    min-width:960px;
}

    qui semble résoudre le problème.

    InformationsquelleAutor Tech163