CSSでオーバーフローのない画面に収まるようにdivを取得するには

#topnavbar { 
      width:100%; 
      padding:0; 
      border:1px solid gray; 
      margin:0; } 

     #topnavbar p { 
      margin:0; } 

     body { 
      margin-left:auto; 
      margin-right:auto; 
      margin-top:0; 
      width:1024px; }

これは私のコードです。オーバーフローせずに画面全体にフィットするバー（topnavbarという名前）を取得するにはどうすればよいですか？そして私はoverflow:hide;などをしたくありません。CSSでオーバーフローのない画面に収まるようにdivを取得するには

出典

2011-12-15 Marcus

多分 'height：100％'？ – Krzysztof

あなたのCSSは少しオフになっている：

#topnavbar { 
    width:100%; 
    padding:0; 
    border:1px solid gray; 
    margin:0; 
} 

#topnavbar p { 
    margin:0; 
} 

#container{ 
    width:1024px; 
    margin: 0 auto; 
} 

body { 
    /* you do not need any of your css here */ 
}

HTML：

<body> 
    <div id="topnavbar"> 
     <p>Some text</p> 
    </div> 
    <div id="container"> 
     whatever you want to center 
    </div> 
</body>

基本的な考え方は、100％の幅することである親が、その後の下に、あなたの心のコンテナを適用しない要素それ。この場合、#container。

あなたのCSSはボディに幅を適用していたため、レイアウト全体が乱れる可能性がありました。

出典

2011-12-15 21:06:39

あなたのコメントに返信していましたが、少し早く削除しました。私は言っていた：あなたは正しい、私は少し速かった。しかし、境界線は水平方向のスクロールを生成したので、オーバーフローについての彼の質問は...私は答えはちょっと答え:-) – ptriek

実際に両方の答えだと思います。私はそれを振り返ってみると面白いですが、意図的に1024にサイズ変更して、境界線で追加された2ピクセルのスクロールバーについて疑問に思っていました... Marcus Szantoだけがこの時点で確かに知っています。 –

まだ彼は沈黙の中で熟考している。 – ptriek

画面の全幅に合っているということですか？

Paradoxally、あなただけ

EDIT（...ボーダーがこの値に追加されている）width:100%を削除する必要があります。そして、はい、カイ清は、あまりにも、右である - 私はそれを逃しました。あなたの体に1024の幅を置くと、navbarも1024になります。

出典

2011-12-15 21:08:06 ptriek

はい。明確にするために：width：100％はdivの* text-area *（borderを含まない）がコンテナの幅の100％であることを意味します。この場合、bodyです（ページのボディの幅は指定されていないので、ビューポートを意味します）。 width：100％を削除すると、topnav divの幅はデフォルトで 'auto'になります。つまり、ボーダーとパディングを考慮してコンテナに正確に収まるように伸びます。 – Faust

CSSでオーバーフローのない画面に収まるようにdivを取得するには

答えて

関連する問題