2

私は CSS を初めて使用し、CSS を使用して最初のサイトをゼロから設計しています (私は最近卒業して、html を使用して Web サイトのスタイルを設定するのをやめました)。

ヘッダーとフッターが本文コピーの幅を超えて、ページの左から右に完全に収まるページを作成したいと考えています。コードを開始しましたが、行き詰まっています。ヘッダーにはロゴとナビゲーションがあり (ナビゲーションはまだコーディングしていませんが、それほど難しいことではありません)、フッターには 1 行のコンテンツしかありません。

私は他の質問で例を調べましたが、答えはすべて非常に複雑で、スクロールバーのようなものが含まれていて、それは私が望む以上のものです.

これを行う方法についての提案は大歓迎です! これがばかげた質問である場合は申し訳ありません。ありがとう。

HTML

<body>

<!-- begin wrapper -->
<div id="wrapper">

<!-- begin header -->
  <div id="header">
    <p>Content</p>
  </div>

<!-- begin navigation -->
  <div id="navigation">
    <ol>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Contact</li>
    </ol>
  </div>

<!-- begin content -->
  <div id="content">
    <h1>Heading</h1>
    <p>Content</p>
  </div>

<!-- begin footer -->
  <div id="footer">
    <p>Content</p>
  </div>

</div>

</body>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);

#header {
    background: #636769;
}

#navigation {
}

body {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 16pt;
    background: url(../images/texture.png);
}

#wrapper {
    width: 938px;
    margin: 0 auto;
    padding: 20px 20px;
    background: white;
}

#footer {
   background: #636769;
}
4

3 に答える 3

3

#headerページ全体にまたがりたい場合は#footer、それらを から移動する必要もあります#wrapper。高さも指定したい場合がありますheight: 40px。

スクロール中にヘッダーとフッターを固定しますか? position: fixed;その場合は、両方で使用してください。次に、#header入れtop: 0px; left: 0px; right: 0px;ます。そして#footer置くbottom: 0px; left: 0px; right: 0px;。

他にやりたいことがあれば、お知らせください。喜んでお手伝いします。

于 2012-05-30T03:20:17.927 に答える
2

#wrapper クラスはページ全体を包含するため、後続のタグはすべて同じ値を継承します。#header または #footer でこれを無視する場合は、それらのクラスに別の値を指定する必要があります。これらのクラスを変更して独自の幅の値 (つまりwidth: 938px;) を指定し、何が起こるかを確認してください。

于 2012-05-30T03:23:18.473 に答える
0

headerおよびdiv を のfooter外側に引き出してwrapper、ページの幅に収まるようにします。

<body>

<!-- begin header -->
  <div id="header">
    <p>Content</p>
  </div>

<!-- begin wrapper -->
<div id="wrapper">

<!-- begin navigation -->
  <div id="navigation">
    <ol>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Contact</li>
    </ol>
  </div>

<!-- begin content -->
  <div id="content">
    <h1>Heading</h1>
    <p>Content</p>
  </div>

</div>

<!-- begin footer -->
  <div id="footer">
    <p>Content</p>
  </div>

</body>
于 2012-05-30T03:25:30.950 に答える