2

私がやろうとしているのは、実際の navbar が中央で約 960px であるが、背景色がウィンドウの幅全体に及ぶ navbar のようなブートストラップを持つことです。

ただし、ウィンドウの幅が 960px 未満でスクロールすると、背景が最後まで表示されません。

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>

前もって感謝します！

編集：おっと。そこには余分なものがありましたが、それは問題ではありませんでした。

4

4 に答える 4

1

高さは内側の div (#container) にある必要があります。試す

#nav { background-color: #cfcfcf; }

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

http://jsfiddle.net/wYGLj/を参照してください

于 2013-02-03T01:41:06.327 に答える
0

追加した

body {
    min-width:960px;
}

これで問題が解決したようです。

于 2013-02-03T14:23:24.060 に答える
0

ページ全体にまたがるには、nav div が必要です。

#nav { width:100%; }

この場合に機能します。

于 2013-02-03T01:40:10.117 に答える
0

CSS は正常に機能しています。したがって、画面全体の長さに拡張する場合は、wrapperその灰色の要素を処理する を作成します。このような。

<!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>
于 2013-02-03T01:42:05.053 に答える