2017-12-29 16 views
0

私はポジションを選ぶことに決めました:フッタ全体をカバーするように固定(空白なし)。ただし、ページのサイズを下から上に変更しようとすると、フッターがコンテンツをカバーします。私はそれが底にフッタを保つために固定位置のアイデアだが、それを違ったものにする方法があるかどうかを知ることができますか?フッタがコンテンツをカバーするのを防ぐにはどうすればよいですか?サイズを変更している間に、位置固定フッターをブラウザの他の要素すべてに適用する方法はありますか?

body { 
 
    box-sizing: content-box; 
 
} 
 

 
section { 
 
    padding: 20px 0px; 
 
} 
 

 

 
#content { 
 
    font-size: 20px; 
 
    font-family: 'American Typewriter'; 
 
    text-align: center; 
 
} 
 

 

 
.footer { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    margin-left: 0px; 
 
    margin-right: auto; 
 
    display: block; 
 
    user-select: none; 
 
    -moz-user-select: none; 
 
    -webkit-user-drag: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Sample</title> 
 
    <link href="index.css" rel="stylesheet" type="text/css" /> 
 
    </head> 
 

 
    <body> 
 
    <section> 
 
     <div id="content">Lorem ipsum dolor sit amet, aperiam utroque pertinacia eam ut, quando voluptua eos te, vide animal 
 
      repudiare eu nec. Eum eligendi perfecto cu. Ne pri invenire accommodare complectitur. Cu legere regione epicurei cum, 
 
      usu no velit dicta mollis. Alia equidem eum eu. Sit ne dolore molestiae. 
 

 
      Minim ludus in vim. Facer percipit nec cu. Aeterno indoctum conceptam an eam. Mea civibus fabellas an, ad sit tempor 
 
      everti noluisse, in latine conceptam quo. 
 
     </div> 
 
    </section> 
 

 
     <section> 
 
     <img src="http://www.durangobrewing.com/Images/Beer%20Pop%20Outs/DBC_Web_PopOut_paleAle_Footer.png" class="footer"> 
 
     </section> 
 
    </body> 
 
</html>

1

+0

だから、テキストはフッターの上にあること、またはそれがすべてでフッターに触れるはずのしたいですか? –

答えて

0

あなたのフッターに-1 Zインデックスを追加します。要素のスタック順序を指定します。

body { 
 
    box-sizing: content-box; 
 
} 
 

 
section { 
 
    padding: 20px 0px; 
 
} 
 

 

 
#content { 
 
    font-size: 20px; 
 
    font-family: 'American Typewriter'; 
 
    text-align: center; 
 
} 
 

 

 
.footer { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    margin-left: 0px; 
 
    margin-right: auto; 
 
    display: block; 
 
    user-select: none; 
 
    -moz-user-select: none; 
 
    -webkit-user-drag: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
    z-index:-1; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Sample</title> 
 
    <link href="index.css" rel="stylesheet" type="text/css" /> 
 
    </head> 
 

 
    <body> 
 
    <section> 
 
     <div id="content">Lorem ipsum dolor sit amet, aperiam utroque pertinacia eam ut, quando voluptua eos te, vide animal 
 
      repudiare eu nec. Eum eligendi perfecto cu. Ne pri invenire accommodare complectitur. Cu legere regione epicurei cum, 
 
      usu no velit dicta mollis. Alia equidem eum eu. Sit ne dolore molestiae. 
 

 
      Minim ludus in vim. Facer percipit nec cu. Aeterno indoctum conceptam an eam. Mea civibus fabellas an, ad sit tempor 
 
      everti noluisse, in latine conceptam quo. 
 
     </div> 
 
    </section> 
 

 
     <section> 
 
     <img src="http://www.durangobrewing.com/Images/Beer%20Pop%20Outs/DBC_Web_PopOut_paleAle_Footer.png" class="footer"> 
 
     </section> 
 
    </body> 
 
</html>

関連する問題