CSS：ページの下部にフッタを付ける方法

ページの下部にフッタを付けたいと思います。そうするために、私は他の似たようなトピックで推奨されているように、CSSの絶対位置を使用しました。しかし、未知の理由のために、フッターはあたかも固定であり、絶対ではないかのように振る舞います。CSS：ページの下部にフッタを付ける方法

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    font-family: "Times New Roman", Times, serif; 
 
    font-size: 20px; 
 
} 
 

 
header { 
 
    background: rgba(150, 150, 150, 0.5); 
 
    border-bottom: solid 1px; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 

 
main { 
 
    padding-top: 5px; 
 
    padding-left: 100px; 
 
    padding-right: 100px; 
 
    padding-bottom: 60px; 
 
} 
 

 
footer { 
 
    border-top: solid 1px; 
 
    background: rgba(150, 150, 150, 0.5); 
 
    width: 100%; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <title>Index</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    This is header 
 
    </header> 
 

 
    <main> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    </main> 
 

 
    <footer> 
 
    This is footer 
 
    </footer> 
 
</body> 
 

 
</html>

画面1：画面2：

フッタは、ページの下縁部に固執すべきではなく、それは、ブラウザの下縁部とスティックのまま。どうしましたか？

出典

2017-05-30 sva605

理由だけではなく '位置を使用していない：relative'？ – Tom

http://plnkr.co/edit/o5aTdu4iLGSVIWxi3sUuこれをチェックしてください。 3つのCSSルールを削除して、フッタが自然にページ下部の – Bramastic

@thebluefoxに移動させるようにしてください。コンテンツが画面を満たさない場合、フッターはビューポートの最下部には表示されないため、OPはコンテンツの下部または画面の下部に表示される固定フッタ（いずれか大きい方） – Pete

体の高さを100％に設定しているため、身体はビューポートの高さにしかなりません。（また、本体に対する位置を追加）体にmin-heightを使用してみてくださいません：

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100%; 
 
    width: 100%; 
 
    font-family: "Times New Roman", Times, serif; 
 
    font-size: 20px; 
 
} 
 

 
header { 
 
    background: rgba(150, 150, 150, 0.5); 
 
    border-bottom: solid 1px; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 

 
main { 
 
    padding-top: 5px; 
 
    padding-left: 100px; 
 
    padding-right: 100px; 
 
    padding-bottom: 60px; 
 
} 
 

 
footer { 
 
    border-top: solid 1px; 
 
    background: rgba(150, 150, 150, 0.5); 
 
    width: 100%; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <title>Index</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    This is header 
 
    </header> 
 

 
    <main> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    </main> 
 

 
    <footer> 
 
    This is footer 
 
    </footer> 
 
</body> 
 

 
</html>

出典

2017-05-30 09:20:29 Pete

フッター位置を指定する必要はありません、また、下、左を削除します。すべてのセクションのの高さは（％単位）です。大きな場合や、誰かの画面サイズは、画面をズームアウト場合、CSS以下でここ

html, body { 
margin: 0; 
padding: 0; 
height: 100%; 
width: 100%; 
font-family: "Times New Roman", Times, serif; 
font-size: 20px; 
} 

header { 
height:10%; 
background: rgba(150,150,150,0.5); 
border-bottom: solid 1px; 
width: 100%; 
text-align: center; 
padding-top: 20px; 
padding-bottom: 20px; 
} 

main { 
height:80%; 
padding-top: 5px; 
padding-left: 100px; 
padding-right: 100px; 
padding-bottom: 60px; 
} 

footer { 
height:10%; 
border-top: solid 1px; 
background: rgba(150,150,150,0.5); 
width: 100%; 
height: 40px; 
padding-top: 10px; 
text-align: center; 
}

を試すか、ページ内のコンテンツが非常に小さい場合、フッターは常にページの下部に残ります。

出典

2017-05-30 09:27:52

-1

あなたがフレックスボックスを使用できるのであれば、それがあなたの解決策です。ここではCSSトリックを見てください。あなたはもっと必要はありません。 https://css-tricks.com/couple-takes-sticky-footer/

HTML：

<body> 
    <div class="content"> 
    content 
    </div> 
    <footer class="footer"></footer> 
</body>

CSS：

html, body { 
    height: 100%; 
} 
body { 
    display: flex; 
    flex-direction: column; 
} 
.content { 
    flex: 1 0 auto; 
}

出典

2017-05-30 09:28:29 Samuell

CSS：ページの下部にフッタを付ける方法

答えて

関連する問題