3

divが画面の全幅を想定できるようにしながら、コンテンツをdiv内の中央に配置したいと思います。ヘッダーにxを繰り返す背景画像があり、コンテンツを中央に配置しながら画面の全長を伸ばす必要があります。以下の例に示すように、divをコンテナーとして追加できることはわかっていますが、それによってhtmlに多くの非セマンティックマークアップが追加されます。スージーコンテナインクルードが私のプロジェクトのラッパーに追加されました。

<body>
  <div class="wrapper">
    <header>
      <div class="container">
         centered content goes here...
      </div>
    <header>
  </div>
<body>

余分な内部コンテナdivを必要とせずにSusyでこれを行う方法はありますか？ヘッダーだけで問題ない場合でも、私のマークアップでは多くの場所でこれが必要になります。最終的には、cssグリッドフレームワークのように見えます。

4

1 に答える 1

2

機能するいくつかのオプションがあります。実際、CSS で見つけられる解決策はすべて、Susy を使用して解決できます。Susy コンテナーについては、自分で CSS を作成する場合と異なる点は何もありません。Susy が計算してくれます。

最も堅牢で明白なアプローチには 1 つのラッパーが必要ですが、<header>要素はその役割をうまく果たし、コンテナーとヘッダーに加えて追加の div は必要ありません。

<header>
  <div class="container">
    content...
  </div>
</header>

私が使用した別のアプローチは、生成されたコンテンツでページ全体の背景を作成することです (ヘッダーのみを使用)。これには、ヘッダーの高さを知る必要があります。

header {
  @include container;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 6em; // the height of your header.
  }
}

または、overflow-x を体の非表示に設定します。

body { overflow-x: hidden; }

header {
  @include container;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

また、適切に機能させるには、z-index の調整が必要になる場合があります。

気に入った別の css/html アプローチを見つけた場合 (ぜひ見てみたい)、Susy でそれを機能させる方法がわからない場合は、喜んでお見せします。

于 2013-02-06T04:03:57.023 に答える