フッターをページの下に固定する（ヘッダーなし）

Question

私はまだCSSを学んでいますが、あまりにも良いことではありません。この問題の修正を見つけることができれば、私はどこにいるのかの例を提示できます新しいCSSを置くか、削除してください。私は今では少なくとも30の異なるものを試してきて、動作するものを見つけることができませんでした。

私はテキストを画面に表示せずにヘッダーを使用していますが、その下に2番目のテキストを強制したいとします。

ここに私のセットアップを表現するのに役立つ画像です：

これは私がテキストを中央に（私はそうなるべく影響を受けずセンタリングテキストとフッターの仕事の両方を、それを維持したいしまったコードの一部であります細かい）

<div class="centered"> 
    <h1>Main text</h1> 
</div> 
<h3 class="footer">Sub text</h3> 

ここで私は行くしまったCSSです：

.centered { 
position:absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
} 

.footer { 
    position:fixed; 
    bottom:0; 
    clear:both; 
    height:75px; 
} 

私が中心にテキストが罰金前夜の作品言ったようにnまだページが中央に置かれている場合は、その下にフッターを置いて、下に固定します。ご協力いただきありがとうございます〜

Answer 1

あなたはすでにそれを行っています！

.footer { 
    position: fixed; 
    bottom: 0; 
    clear: both; 
    height: 75px; 
    left: 0; 
    right: 0; 
    text-align: center; 
    margin: 0; 
} 

.centered { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    clear: both; 
 
    height: 75px; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    margin: 0; 
 
}

<div class="centered"> 
 
    <h1>Main text</h1> 
 
</div> 
 
<h3 class="footer">Sub text</h3>

Answer 2

Methord 1：

あなたは絶対に使用するための相対を持っている必要があり、私の知識（私が間違っている場合はご容赦下さい）を1として。そして、あなたが中心に置いておきたいテキストの中に、それを配置したい内側のセクションを使って完成させることができます。内側のセクションがないので、パディングを使用しました。

.centered { 
 
text-align: center; 
 
padding-top: 80px; 
 
position: relative; 
 
} 
 

 
.footer { 
 
position: absolute; 
 
clear: both; 
 
bottom: 0; 
 
left: 0; 
 
right: 0; 
 
text-align: center; 
 
}

<div class="centered"> 
 
    <h1>Main text</h1> 
 
</div> 
 
<h3 class="footer">Sub text</h3>

Methord 2： また、それが少ない特性を有しているので、flexboxを通過使いやすいと応答することができます。