2017-12-28 3 views
0

私は現在、HTML & CSSを学習しています。それぞれのコンセプトをよく理解していますが、少なくとも自分のフッタタグが完全に消えてから絶対的な位置に置かれるまで、私はやったと思っていました。私はあなた自身の中で消えたものが何を意味するのかを知っていますか?つまり、フッターをもう一度見るために、左の位置の値を1024から850に調整しなければならなかったということです。私は、なぜフッタを絶対値に設定した後にポジション値が非常に高くなったのかを質問します。本質的には、私が求めている質問です。私は十分に説明してくれることを望みます。私は写真を含めることを試みたが、Stackoverflowは私の最初の投稿以来私を許可しないだろう。また、私はフッター、divとヘッダーの要素の位置は、相対的な.......コードに設定されているページ上の他の3つの他のdivを3つ持っていた。フッタが絶対的に消えた理由

main, header, footer{ 
 
    display: block; 
 
} 
 

 
.page-container{ 
 
    width: 95%; 
 
    margin: 0 auto; 
 
    background-color: #050111; 
 
    position:relative; 
 
    
 
} 
 

 
header{ 
 

 
    width: 100%; 
 
    height: 60px; 
 
    margin: 0px auto; 
 
    background-color: blue; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
h1{ 
 
    color: white; 
 
    line-height: 50px; 
 
    margin: auto; 
 
} 
 

 
main{ 
 

 
    width: 100%; 
 
    height: 500px; 
 
    margin: 10px auto; 
 
    background-color: rgb(24, 223, 223); 
 
    text-align: center; 
 

 
} 
 

 
footer{ 
 
    widows: 100%;; 
 
    height: 120px; 
 
    margin: 0 auto; 
 
    background-color: blueviolet; 
 
    text-align: center;
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="main.css"> 
 
    <title>Layout practice</title> 
 
</head> 
 
<body> 
 
    <div class="page-container"> 
 
     <header> 
 
      <h1>This is the header of the page</h1> 
 

 
     </header> 
 

 
     <main> 
 
      <h1>Main Content</h1> 
 

 
     </main> 
 

 
     <footer> 
 
      <h1>Footer</h1> 
 

 
     </footer> 
 

 
    
 
    </div> 
 
    
 
</body> 
 
</html>

+0

質問のスニペットにCSSを追加してください。 – JasonB

+0

オリジナルの投稿にCSSが追加されました。 – Chasencode

+0

@Chasencodeフッターを固定するか、ページの下部に移動しますか?フッタCSSの幅の代わりに – Sharvan

答えて

-1

position:absolute;その祖先要素に要素を相対的に配置します。したがって、フッターを絶対的な位置に置いた場合、ページの本文が始まるところから始まります。

footer{ 
    position:absolute; 
    bottom:0; 
} 

bottom:0;を追加すると、エレメントが本体の最下部に配置されます。

関連する問題