0

次のレイアウトが提示されました。

ページレイアウト

どこ：

  • A = ヘッダー、width: 100%
  • B = ページ コンテンツ、max-width: 960px; margin: 0 auto
  • C = フッター、width: 100%

私が抱えている問題はH1にあります。このデザインには、H1 の背景があり、画面の左端から入ってきて、下のコンテンツの右側と一列に並んでいます。ブラウザ ウィンドウが 960px 未満の場合、明らかに、画面全体に広がる実線のバーとして表示されます。

私はこれを開始する方法さえ本当に途方に暮れています。ある種の負の左マージン + パディング左について考えましたが、固定サイズを知らなければ、パーセンテージに頼って要素を正確に整列させることは困難です。

私が解決策に到達したと思う最も近いのは、H1を中心とする、またはH1を囲むコンテナ上にある巨大な背景画像を持つことです。単色なので理想的ではないので、画像を使用することは私の道徳的判断に反します.

何か案は？ページの構造は次のとおりです。

<header>
    <h1>This is my title</h1>
</header>
<article></article>
<footer></footer>

CSS

header,
footer {
    width: 100%;
    min-height: 100px;
    background: #eee;
    overflow: hidden;
}

article {
    margin: 0 auto;
    max-width: 500px;
    height: 100px;
    background: #ddd;
}

h1 {
    margin: 30px auto;
    width: 500px;
    background: #bbb;
}
4

3 に答える 3

1

これを試す方法はいくつかあります。

jQuery ソリューションは最も正確な結果を提供しますが、この種の問題には少し重く、個人的には CSS の問題に Javascript を使用するのは好きではありません。

背景画像で何らかのトリックを行うことができますが、実際のデザインに応じて必要になる場合がありますが、単一の背景色に関しては、ヘッダーの後ろに負のマージンで配置された要素でおそらく問題を解決できます-上、幅を 50% に設定します (この方法では、常にヘッダーの後ろに隠れたままにする必要があります)。あなたがする必要があるのは、それを一致させ、ヘッダーheightとmargin-topブレンドすることだけです.

.header-botch {
  background: #bbb;
  height:37px;
  width:50%;
  margin-top:-67px;
}

http://jsfiddle.net/duFnR/1/

何らかの理由で負のマージンを使用するという考えが嫌いな場合はposition: absolute、代わりに要素を使用できます

http://jsfiddle.net/duFnR/2/

于 2013-10-18T09:35:08.337 に答える