nav divの上端を画面全体に表示しようとしていますが、動作しません。ボディが1020pxとして設定されているときにビューポートが機能しない
body {
line-height: 1;
width: 1020px;
font-family: 'Droid Sans', sans-serif;
margin: 0 auto;
}
.nav {
margin: 0 auto;
border-top: 6px solid #9FCC7F;
width: 100vw;
}<body>
<div class="nav"></div><!-- Nav -->
</body>ビューポート機能が動作していないことを不思議なのですか？あなたは見てみましょうか？
おかげで再び。
変更幅：100vwは100％幅にすると、それは
はこれを見てください動作するはずです：Difference between Width:100% and width:100vw?
body {
line-height: 1;
font-family: 'Droid Sans', sans-serif;
margin: 0 auto;
}
.nav {
margin: 0 auto;
border-top: 6px solid #9FCC7F;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="nav"></div><!-- Nav -->
</body>それはすることができ、ボディ幅1020px理由デバイスがサポートできる解像度を超えています。
このリンクをチェック：http://www.w3schools.com/css/css_rwd_viewport.asp
固定幅は、デバイスの幅を残し
body{
width:100%; // for full page width
}
としてプロパティを設定し
の最大解像度を超えたときに、ビューポートが正しくレンダリングできない、ブラウザが自動的に
を検出し、身体から1020pxを取り除くと、問題が解決します。
は、ここで私はあなたのためのコードを追加した例https://jsfiddle.net/rahulxdd/wc5c0xk1/
body {
width: 100%;
}
問題点を追加して、 。 –
私はしない; 1020pxを削除したくない –
です：その意志の自動応答ビューポート内で調整しているため より良いあなたがwidth:100%に適用されます。 pxはmobile,tabモードでデスクトップmode.switch中で適応
1020pxを適応していないのではないusefull.soだけsugges 100%
そして追加することを忘れないでください、ビューポートタグ自動で調整 <meta name="viewport" content="width=device-width, initial-scale=1.0"> そのとビューポート。
body {
width: 100%;
font-family: 'Droid Sans', sans-serif;
}
.nav {
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
border-top: 6px solid #9FCC7F;
width: 100%;
}<body>
<div class="nav"></div><!-- Nav -->
</body>
親切にあなたの期待が何であるかを明確に？ – prasanth
bodyから 'width：1020px'を削除して解決しますか？ – kukkuz
これは私が達成しようとしているものです - http://i.imgur.com/pXdXMYr。png @prasad –