最大ボディ幅を無視して、特定のdivをその幅の外に拡大する方法はありますか？

私の答えに似たような質問がありますが、私の問題ではうまく動作しませんでした。基本的に960pxに本体の幅を設定しました。ヘッダー/フッターであるこの幅と、コンテンツページの特定の領域を示す背景色のみを含むいくつかのdivによって定義されます。最大ボディ幅を無視して、特定のdivをその幅の外に拡大する方法はありますか？

他のdivがフッター/ヘッダーだけでなく、ボディの幅を無視できるようにする必要があります。

将来的にフッタの位置を狂わせるので、私はフッタのためにそれを使用したくないので絶対位置を使用することはできません。

html, 
 
body { 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    width: 960px; 
 
    height: 100%; 
 
} 
 

 
.Frame { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.Row { 
 
    display: table-row; 
 
    height: 1px; 
 
} 
 

 
.Row.Expand { 
 
    height: auto; 
 
} 
 

 
.Row.footer { 
 
    height: 30px; 
 
    background-color: gray; 
 
    margin-bottom: 0; 
 
    width: 100%; 
 
}

<body class="Frame"> 
 

 

 
    <header class="Row"> 
 
    /*header should ignore body width*/ 
 
    </header> 
 
    <section class="Row Expand"> 
 
    /*some div should ignore the body width*/ 
 
    </section> 
 
    <footer class="Row footer"> 
 
    /*footer should ignore body width/* 
 
    <h3>Sticky footer</h3> 
 
    </footer> 
 

 
</body>

出典

2017-09-06 Luke

<body>タグに固定幅を設定しないでください。それは起こるのを待っているだけのトラブルです。

あなたが行っているデザインを理解していると思います。ここで私はどうなるのかの基本的なモックアップだ：

$('#main-content').css("min-height", $(window).height() - $("#footer").height() - $("#header").height() + "px");

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    max-width: 100vw; 
 
} 
 

 
#header, 
 
#footer, 
 
#content-wapper, 
 
section, 
 
img { 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
section.image, 
 
img { 
 
    font-size: 0; 
 
    display: block 
 
} 
 

 
#header, 
 
#footer { 
 
    background: #333; 
 
    height: 40px; 
 
    color: white; 
 
} 
 

 
#main-content { 
 
    background: #999; 
 
} 
 

 
.small { 
 
    width: 800px; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
    padding: 2vw; 
 
    background: #131418; 
 
} 
 

 
section p { 
 
    color: white; 
 
    line-height: 1.25 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 

 
    <div id="content-wrapper"> 
 

 
    <header id="header"> 
 
     /*header should ignore body width*/ 
 
    </header> 
 

 
    <div id="main-content"> 
 
     <section class="small"> 
 
     <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit. 
 
      Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius 
 
      aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p> 
 
     </section> 
 
     <section class="image"> 
 
     <img src="https://unsplash.it/1350/600" alt=""> 
 
     </section> 
 
     <section class="small"> 
 
     <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit. 
 
      Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius 
 
      aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p> 
 
     </section> 
 
     <section class="image"> 
 
     <img src="https://unsplash.it/1500/600" alt=""> 
 
     </section> 
 
     <section class="small"> 
 
     <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit. 
 
      Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius 
 
      aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p> 
 
     </section> 
 
     <section class="image"> 
 
     <img src="https://unsplash.it/800/600" alt=""> 
 
     </section> 
 
     <section class="small"> 
 
     <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit. 
 
      Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius 
 
      aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p> 
 
     </section> 
 
     <section class="image"> 
 
     <img src="https://unsplash.it/800/800" alt=""> 
 
     </section> 
 
     <section class="small"> 
 
     <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit. 
 
      Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius 
 
      aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p> 
 
     </section> 
 
     <section class="image"> 
 
     <img src="https://unsplash.it/1800/600" alt=""> 
 
     </section> 
 
     <section class="small"> 
 
     <p>Lorem ipsum dolor sit amet, id sea tale ubique legere, ex elit veri iudicabit eos. Vix at dicat pertinax, nibh libris nemore in mei, vis novum evertitur eu. Vim atqui ullum verterem ei, vocibus efficiantur te vim, elitr cetero adversarium an sit. 
 
      Eu eam commune prodesset persequeris. Ex mel quod incorrupte. Cu choro congue dignissim usu. Vix no iisque patrioque, novum fierent singulis qui cu. Odio dolore altera mei ei, ex nam nonumy mollis. In vis invidunt senserit accommodare, vim persius 
 
      aliquid instructior et. Ex quo appareat assentior, ornatus graecis minimum te usu.</p> 
 
     </section> 
 
    </div> 
 

 

 
    <footer id="footer"> 
 
     /*footer should ignore body width/* 
 
     <h3>Sticky footer</h3> 
 
    </footer> 
 

 
    </div> 
 
</body>

あなたは、私はjQueryと小さなスクリプトを追加したことに注意しましょう。コンテンツが短すぎると、ページの下部にフッターが表示されます。それはあなたがフッターで達成しようとしていることですか？

ヘッダーの高さとフッターの高さを計算し、ドキュメントの高さから差し引き、＃main-contentの最小高さをその値に設定します。フッターは常にページの一番下にあります。

出典

2017-09-06 09:03:37

ありがとうございましたまさに私が探していたものです:)私はそれをショットを与える – Luke

あなたは大歓迎です@ user8532351 –

これについてのチュートリアルがあるかどうか尋ねることができますか？あなたはどこからでもそれを手に入れましたか？私はそれを読んでみたいと思っています:) – Luke

あなたが唯一のヘッダーとフッターでそれをしたい場合は答えは異なりますか？しかし、いずれの方法でも解決策が解決されます：本体の幅を削除し、<div class="main-content"></div>に追加するか、または<main class="main-content"></main>の例のように追加します。

<body> 
     <header></header> 
     <main class="main-content"> 
     <section></section> 
     <section></section> 
     <section></section> 
     <section></section> 
     </main> 
     <footer></footer> 

</body> 

.main-content { 
    width: 960px; 
}

あなたのCSSを見ると非常に多くの質問があります。 bodyをdisplay: table;と設定するのはなぜですか？

出典

2017-09-06 08:50:04

あなたの質問に答えるために、私はこの記事に従っていました。 https：// pixelsvsbytes。com/2011/09/sticky-css-footers-the-flexible-way/ – Luke

また、メインのdivから無視したいヘッダーとフッターだけでなく、 "メインコンテンツ"の中にdivsもありますメインのdivの幅を無視したいと思います – Luke

ヘッダーとフッターに負のマージンを付けることもできます（@mediaクエリで960pxサイズを超えた瞬間から）。私は幅100％が960pxで最大になると思うので、あなたもあわせてやる必要があります。

@media (min-width: 960px) { 
     footer, header { 
      margin-left: calc(-(50vw-480px)); 
      margin-right: calc(-(50vw-480px)); 
      width: 100vw; 
     } 
    }

私は問題に近づくのが間違った方法だと思います。しかし、それは動作します（例外的な良いアプリケーションを持っています）。

Dejan.Sのアプローチは、すべての幅を制限するのではなく、いくつかの要素でこれを取り消そうとするのではなく、制限を必要とする要素のみを制限します。

出典

2017-09-06 09:06:56

最大ボディ幅を無視して、特定のdivをその幅の外に拡大する方法はありますか？

答えて

関連する問題