CSSでmax-widthを使用するときに灰色の余白を作成する方法

Question

最大幅とフッターを持つページを作成し、ウィンドウのサイズが大きい場合はページの主要部分を設定する余白を灰色に設定します。最大幅。また、私は底に固定フッターを持っています。

メインコンテンツの色を白に設定し、余白を設定します。これは、メインディビジョンの高さがフッタにすべてのスペースを占める場合を除き、次にこの未使用領域には大きなグレーのブロックがあります。

メインのdivがすべてのスペースを占めるかどうかにかかわらず、目標は1024pxを超えるスペースの灰色の余白です。ここで

は私が持っているものです。これを与え

<style> 
body { 
    background-color: gray; 
    max-width:800px; 
    margin: 0 auto; 
} 
#main { 
    background-color: white; 
} 
#footer { 
    text-align: center; 
    max-width: 800px; 
    background-color: white; 
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    margin: 0 auto; 
} 
</style> 
<div id='main'> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis tortor a nisl rhoncus, vitae aliquet lectus sodales. 
</div> 
<div id="footer">Footer Goes Here</div> 

。 #mainと#footerの間のグレーを確認できます

お勧めはありますか？

Answer 1

私があなたの要件をはっきりと理解していれば、widthが800pxより大きい場合は、メインコンテンツの左右に灰色の余白が残ることを望みます。メインコンテンツの適切な高さを設定する必要があります。 viewportの高さを計算し、主要コンテンツの高さとして設定します。以下のコードまたはjsfiddle exampleを確認してください。

body { 
 
    background-color: gray; 
 
    max-width:800px; 
 
    margin: 0 auto; 
 
} 
 
#main { 
 
    background-color: white; 
 
    height: calc(100vh - 50px); 
 
} 
 
#footer { 
 
    text-align: center; 
 
    max-width: 800px; 
 
    background-color: white; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    height:50px; 
 
}

<div id='main'> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis tortor a nisl rhoncus, vitae aliquet lectus sodales. 
 
</div> 
 
<div id="footer">Footer Goes Here</div>

あなたのフッターの高さを変更し、それに応じてメインコンテンツのheight計算で値を変更したい場合があります。私はそれを例えば50pxに設定しました。

これをテストするには、ブラウザウィンドウのサイズを変更して灰色のマージンを表示してください（jsfiddleのブラウザセクションもそこでテストしたい場合はサイズ変更可能です）。

注 - もpxのヘッダの高さを持っている場合はは、あなたもメインコンテンツheight計算にその値を含める必要があります。