サファリのマージンボトムの問題

サファリはフルハイトセクションのマージンボトムをとらないでください。誰もこの問題を抱えていますか？私は割合用を使用して、ブートストラップとwordpressのサファリのマージンボトムの問題

<body> 
    <header></header> 
    <section></section> 
    <footer></footer> 
</body> 


html,body{ 
    width:100%; 
    height:100%; 
    position:relative; 
    margin:0; 
} 

header{ 
    width:100%; 
    height:50px; 
    background:#3D2D34; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:3; 
} 

section{ 
    width:100%; 
    height:100%; 
    background:#799C94; 
    z-index:10; 
    margin-bottom:100px; 
} 

footer{ 
    width:100%; 
    height:100px; 
    background:#E3E29F; 
    position:fixed; 
    left:0; 
    bottom:0; 
    z-index:-1; 
}

出典

2016-05-11 Francis Themens

を使用しています/

：>https://jsfiddle.net/m34hr01s/

それはChromeとFirefoxのではなく、サファリの素晴らしい作品 -

私は迅速なバイオリンを作りました heightでは、コンテナの空きスペースに相対的ではなく、親コンテナのディメンションに関連するディメンションを指定できます。

CSS2

%は割合の高さを指定します。パーセンテージは、生成されたボックスの包含ブロックの高さに対して計算されます。

100%を使用しようとすると、部分的に他のオブジェクトで塗りつぶされている場合は間違っています。あなたが本当にあなたのコードを使用したい場合は、受け入れ可能な解決策は

header { 
    position: relative; 
} 

section { 
    height: calc(100% - 100px - 50px); 
}

しかしcalcがあなたの最後のオプションであるべきだろうので、私は本当にあなたが同じくらいすることができますようflexを使用することを奨励します。

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 

body { 
    display: flex; 
    flex-direction: column; /* We are stacking boxes in column. */ 
    justify-content: space-between; /* Content is spread across all the free space. */ 
} 

header { 
    flex: 0 0 50px; /* Exactly 50px. */ 
    background: #3D2D34; 
} 

section { 
    flex: 1; /* All the free space is mine. */ 
    margin-bottom: 100px; 
    background: #799C94; 
} 

footer { 
    position: fixed; 
    width:100%; 
    height:100px; 
    left:0; 
    bottom:0; 
    background: #E3E29F; 
}

JSFiddle

出典

2016-05-11 23:26:48

こんにちは！ご回答有難うございます！いつでもフッタを見たいと思えば、素晴らしい解決策になるでしょう。私の場合は、フッターの修正を下にしておき、スクロールダウンするときにそれを明らかにしたい。フレックスボックスもInternet Explorerでうまく機能していますか？私は過去にいくつか問題があった。ありがとう！ –

ようこそ。固定フッターを使用するように答えを更新しました。 IEのサポートについて、現代のIE（Edge）はflexを完全にサポートしています。 Modernizrや他の機能検出機構を使用している場合、古いIEで 'calc（）'を使ってデフォルトでフレックスボックスとフォールバックを使うことができます。 –

サファリのマージンボトムの問題

答えて

関連する問題