HTMLとCSSページの一番下にフッターを残す方法は？

私のページの一番下にフッターがあります。十分なコンテンツがある場合、フッターが表示される場所まで下にスクロールするまで、フッターがページにプッシュされます。これはいいですが、ページに十分なコンテンツがない場合は、ページのどこかをスクロールしなくてもフッターが表示されますが、下部には表示されません。十分なコンテンツがない場合、どのように私のフッターをページの最下部に置くことができますか？ここに私のコードは次のとおりです。HTMLとCSSページの一番下にフッターを残す方法は？

<html> 
<head> 
    <title>Omicrome</title> 
    //stuff 
</head> 
<body> 
    <div class = "container_24"> 
    <header> 
     //stuff  
    </header> 
     //stuff 
    </div> 
</body> 
    <div id = "rectangle"> 
     <center> 
     <a href="about" id = "footerbtn2">About</a> 
     <a href="privacy_policy.php" id = "footerbtn1">Privacy Policy</a> 
     <a href="about" id = "footerbtn4">Contact</a> 
     </center> 
     <center><div id = "footerborder"></div></center> 
    </div> 
</html>

マイCSS：CSSのポジショニングを見てみましょう

body{ 
    background-image: url("../img/bg.jpg"); 
    background-repeat: repeat; 

} 
header{ 
    overflow: hidden; 

} 
.container_24{ 

    margin-left: auto; 
    margin-right: auto; 


} 
#rectangle { 
    float:bottom; 
    position: relative; 
    width: 100%; 
    height: 40px; 
    padding-top: 15px; 
    padding-bottom: 10px; 
    background: #404040; 
    top: 50%; 

}

出典

2016-11-09 user7133318

取り除きます。投稿する前にあなたの質問をしてください。 – marcusshep

body { 
position: relative; 
} 

#footerborder { 
position: absolute; 
bottom: 0; 
}

！ Good Basic Explaination here.

出典

2016-11-09 19:40:30 topada

フッターが下部にあり、スクロールするとスクロールしたままになっているため動作しません。また、非常に下までスクロールしなければならないコンテンツがたくさんある場合でも、ページの下部にフッターが表示されます。境界線は一番下にあるはずです。 – user7133318

変更absoluteに対する相対位置からしても、これは非常に一般的な質問ですtop:50%;

body{ 
 
    background-image: url("../img/bg.jpg"); 
 
    background-repeat: repeat; 
 

 
} 
 
header{ 
 
    overflow: hidden; 
 

 
} 
 
.container_24{ 
 

 
    margin-left: auto; 
 
    margin-right: auto; 
 

 

 
} 
 
#rectangle { 
 
    float:bottom;  
 
    width: 100%; 
 
    height: 40px; 
 
    padding-top: 15px; 
 
    //padding-bottom: 10px; 
 
    background: #404040; 
 
    position: absolute; 
 
    bottom: 0px; 
 
}

<div id = "rectangle"> 
 
     <center> 
 
     <a href="about" id = "footerbtn2">About</a> 
 
     <a href="privacy_policy.php" id = "footerbtn1">Privacy Policy</a> 
 
     <a href="about" id = "footerbtn4">Contact</a> 
 
     </center> 
 
     <center><div id = "footerborder"></div></center> 
 
    </div>

出典

2016-11-09 19:44:09

HTMLとCSSページの一番下にフッターを残す方法は？

答えて

関連する問題