web-dev-qa-db-ja.com

divコンテナの境界をエスケープする

さて、私はDIVの目的がその内部要素を含むことであることを理解しています-私は他のことを言って誰かを怒らせたくありませんでした。ただし、次のシナリオを考慮してください。

私のWebページ（ページ全体の70％の幅しか占めていない）は、コンテナー（div）で囲まれています。ただし、ページの上部にあるナビゲーションバーの下に、ページ全体の幅の100％を占めるwバナーを作成したいと思います（つまり、コンテナの境界の外側に拡張する必要があります。コンテナはページの幅の70％しか占めていません）。

これは私が達成しようとしている基本的な考え方です： http://www.petersonassociates.biz/

誰かが私がこれを達成する方法について何か提案がありますか？助けていただければ幸いです。

エヴァン

csshtmlbanner
15
user725913

私が正しく理解していれば、

style="width: 100%; position:absolute;"

あなたがしようとしていることを達成する必要があります。

5
Dennis

要素の背景をページ全体に広げたいだけの場合は、負のマージンでこれを実現することもできます。

一言で言えば（コメントからの訂正）：

.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}

それはあなたがあなたが取り除く水平スクロールバーをあなたに与えます：

body {overflow-x: hidden; }

http://www.sitepoint.com/css-extend-full-width-bars/ にガイドがあります。疑似要素を使用してこれを行う方がセマンティックである可能性があります： http://css-tricks.com/full-browser-width-bars/

18
Mark

これを行うにはいくつかの方法があります。

絶対位置
他の人が提案しているように、100％幅と絶対位置のページCSSプロパティ全体に拡大する要素を指定すると、ページの幅全体に広がります。

ただし、ページの上部にも配置されるため、他のコンテンツが不明瞭になり、現在の100％コンテンツ用のスペースが確保されません。絶対配置はドキュメントフローから要素を削除するため、新しく配置されたコンテンツが存在しないかのように機能します。新しい要素がどこにあるべきかを正確に計算し、そのためのスペースを確保する準備ができていない限り、これはおそらく最善の方法ではありません。

Images：画像のコレクションを使用して目的の画像を取得することもできますが、画像を更新したり、ページの任意の部分の高さを変更したりすることもできます。繰り返しになりますが、保守性には優れていません。 。

ネストされたDIV
これは私があなたにそれをすることを提案する方法です。 100％幅のものについて心配する前に、まず70％中央の外観を設定する方法を説明します。

<div class="header">
<div class="center">
  // Header content
</div>
</div>
<div class="mainContent">
<div class="center">
  // Main content
</div>
</div>
<div class="footer">
<div class="center">
  // Footer content
</div>
</div>

このようなCSSの場合：

.center {
  width: 70%;
  margin: 0 auto;
}

これで、が中央のコンテンツの周りのコンテナとして表示されます。実際には、ページを下に移動するコンテンツの各行は、含まれているdivで構成されています。 、セマンティックで記述的なクラス（header、mainContentなど）を持ち、その中に「center」クラスがあります。

この設定を使用すると、ヘッダーを「コンテナdivから抜け出す」ように見せることは次のように簡単です。

.header {
  background-color: navy;
}

そして、色はページの端に達します。何らかの理由でコンテンツ自体をページ全体に拡大したい場合は、次のようにすることができます。

.header .center {
  width: auto;
}

そして、そのスタイルは.centerスタイルをオーバーライドし、ヘッダーのコンテンツをページの端まで拡張します。

幸運を！

4
rhodesjason

これを行うためのより意味的に正しい方法は、position:absoluteを避けて、ヘッダーをメインコンテナーの外に配置することです。

例：

<html>
  <head>
    <title>A title</title>
    <style type="text/css">
      .main-content {
        width: 70%;
        margin: 0 auto; 
      }
    </style>
  </head>
  <body>
    <header><!-- Some header stuff --></header>
    <section class="main-content"><!-- Content you already have that takes up 70% --></section>
  <body>
</html>

もう1つの方法（<section class="main-content">に保持）は、あなたが言ったように、正しくありません。div（またはセクション）には要素が含まれているはずであり、親のdiv /セクションの範囲外に拡張されていないためです。子divが親divの外にある場合、IE（7以下の場合、これはIE6以下である可能性があります）でも問題が発生します。

4
David Savage

EDIT（2019）：このCSSユーティリティを使用して完全な裁ち落としを取得するための 新しいトリック があります：

width: 100vw;
margin-left: 50%;
transform: translateX(-50%);

私はすべての解決策がちょっと時代遅れだと思います。

要素の境界を回避する最も簡単な方法は、次を追加することです。

    margin-left: calc(~"-50vw + 50%");
    margin-right: calc(~"-50vw + 50%");

議論は ここ と ここ で見つけることができます。今後の grid-layouts のための素晴らしい解決策もあります。

3
Stevie-Ray Hartog