2

特定のWebサイトを再作成するという課題がありましたが、全幅のクロスブラウザテンプレートを作成するのが最善の方法かどうかわかりません。私はHTML5を使用しますが、これまでのところ次のようになっています。

幅を100％だけ使用しますか？

HTML 

<div id="wrapper">
    <header>
        <h1>Logo Position</h1>
        </header>

CSS：

#wrapper{
    width:990px;
    height:100%;
    min-height:100%;
    background:#000;
}
header{
    width:100%;
    height:100px;
    color:#184C82;
}
4

4 に答える 4

2

一般的に、幅は無視して（つまり、どこにも設定しないか、auto以前に制御できないものによって設定されていた場合は設定する）、デフォルトで全幅に設定されます...わずかなマージンがあります端の周り。そのマージンをなくしたい場合（クロスブラウザ）、マージンとパディングの両方を0に設定する必要がありbodyますhtml。

body, html {
    margin: 0;
    padding: 0;
}

通常、高さをいじる必要があるのは、ページのコンテンツが短いときにフッターを画面の下部に押し下げたい場合のみです。あなたはそれを求めなかったので、私は詳しく説明しません。（とにかく、そのトピックに関する既存のStack Overflowの質問があります。）

特定の要素（特にテーブル）には宣言が必要ですが、シュリンクラッピングの原因となるさまざまなCSS宣言の1つ（ 、、または）width: 100%を使用していない限り、divとbodyには宣言は必要ありません。ブロック要素（本体を含む）のデフォルトの動作とまったく同じではないことに注意してください-ブロック要素は、マージン、境界線、およびパディングを尊重して、利用可能な限り多くのスペースを占有しますが、ブロック要素はその親と同じ幅になります要素-そして、マージン、境界線、またはパディングはそれを超えて突き出ます。display: inline-blockfloat: leftposition: absolutewidth: 100%width: 100%

于 2012-05-28T07:42:11.190 に答える
0

<header>幅をに設定する100%と、親の幅、つまり。のみになり990pxます。ビューポートの幅の100％まで拡張する場合は、ラッパーから取り出すか、またはで配置するか、ビューポートの幅であるかのように使用および/または表示する必要absoluteがfixedあり:beforeます:after。

Chris Coyierは、彼の記事Full BrowserWidthBarsでこの最後の方法を示しました。

于 2012-05-28T04:25:18.030 に答える
0

単にwidth:100%ヘッダーで使用してから、ラッパーを削除します。<body>親要素として使用して、レイアウトの個別の部分を個別の DIV として構築します。あなたは黄金になります ！

于 2012-05-28T06:10:59.027 に答える
-1

あなたもそのように使うべきです..

#wrapper {
 width:100%; /* or width:990px; */
 height:100%;
 position:absolute;
}
于 2012-05-28T04:30:38.763 に答える